@onekeyfe/react-native-native-list 3.0.105

package/lib/module/web/NativeListWebEngine.js

@@ -0,0 +1,2238 @@
+"use strict";
+
+import { checkboxStateForKeys, checkboxStateForSection, isSelectableRow, reduceSelection, selectionStateFromSnapshot } from "../selection.js";
+import { calculateAlignedScrollOffset, resolveLocationIndex, scrollFailure, validateOffset } from "../scrolling.js";
+import { applyRowPatches, validateSnapshot } from "../validation.js";
+const SECTION_INDEX_GUTTER = 44;
+const DEFAULT_VIEWPORT_WIDTH = 320;
+const DEFAULT_VIEWPORT_HEIGHT = 640;
+const OVERSCAN_VIEWPORTS = 1;
+export const WEB_REORDER_ANIMATION = {
+  outOfWayDurationMs: 200,
+  outOfWayTimingFunction: 'cubic-bezier(0.2, 0, 0, 1)',
+  dropDurationMs: 80,
+  dropTimingFunction: 'ease'
+};
+const REORDER_TOUCH_LONG_PRESS_MS = 120;
+const REORDER_MOUSE_MOVE_THRESHOLD_PX = 5;
+const REORDER_EDGE_RATIO = 0.25;
+const REORDER_MAX_SPEED_ZONE_RATIO = 0.05;
+const REORDER_MAX_SCROLL_PX = 28;
+const REORDER_SCROLL_ACCELERATE_AT_MS = 360;
+const REORDER_SCROLL_DAMPENING_MS = 1_200;
+const REORDER_DROP_TRANSITION_MS = WEB_REORDER_ANIMATION.dropDurationMs;
+const WALLET_REORDER_COMPACT_HEIGHT = 68;
+let webNativeListInstanceCounter = 0;
+const defaultTheme = {
+  background: '#F7F7F7',
+  rowBackground: '#FFFFFF',
+  rowSelectedBackground: '#EAF2FF',
+  rowPressedBackground: '#E8E8E8',
+  subduedBackground: '#F9F9F9',
+  strongBackground: '#0000000F',
+  primaryText: '#111111',
+  secondaryText: '#6B7280',
+  disabledText: '#8D8D8D',
+  icon: '#111111',
+  iconSubdued: '#8D8D8D',
+  separator: '#E5E7EB',
+  accent: '#2F6BFF',
+  positive: '#15803D',
+  negative: '#DC2626',
+  criticalBackground: '#FEECEC',
+  inverseBackground: '#202020',
+  inverseText: '#FCFCFC',
+  info: '#0D74CE'
+};
+export function webActionAnchorPayload(token, rect, source, generation, layoutDirection, slot) {
+  return {
+    token,
+    windowRect: {
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height
+    },
+    source,
+    slot,
+    generation,
+    layoutDirection
+  };
+}
+export function isWebRowReorderable(snapshot, row) {
+  if (!snapshot.capabilities?.reorderable || row.disabled) return false;
+  if (row.type === 'rail' && row.draggable) return true;
+  if (row.type === 'identity' && row.draggable) return true;
+  if (row.type === 'walletGroup' && row.draggable) return true;
+  return (row.type === 'identity' || row.type === 'action') && Boolean(row.trailing?.some(accessory => accessory.kind === 'drag'));
+}
+export function moveWebReorderRow(rows, fromIndex, toIndex) {
+  if (fromIndex === toIndex || fromIndex < 0 || fromIndex >= rows.length || toIndex < 0 || toIndex >= rows.length) {
+    return rows;
+  }
+  const next = [...rows];
+  const [moved] = next.splice(fromIndex, 1);
+  if (!moved) return rows;
+  next.splice(toIndex, 0, moved);
+  return next;
+}
+export function cancelWebReorderRows(originalRows) {
+  return originalRows;
+}
+export function webReorderEventForRows(originalRows, finalRows, key) {
+  const fromIndex = originalRows.findIndex(row => row.key === key);
+  const toIndex = finalRows.findIndex(row => row.key === key);
+  if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return undefined;
+  return {
+    key,
+    fromIndex,
+    toIndex,
+    beforeKey: finalRows[toIndex - 1]?.key,
+    afterKey: finalRows[toIndex + 1]?.key
+  };
+}
+export function webReorderAutoScrollVelocity(point, start, end, elapsedMs) {
+  const viewportLength = Math.max(1, end - start);
+  const edge = viewportLength * REORDER_EDGE_RATIO;
+  const maxZone = viewportLength * REORDER_MAX_SPEED_ZONE_RATIO;
+  const speedForDistance = distance => {
+    if (distance > edge) return 0;
+    const proposed = distance <= maxZone ? REORDER_MAX_SCROLL_PX : distance === edge ? 1 : Math.ceil(REORDER_MAX_SCROLL_PX * Math.pow((edge - distance) / Math.max(1, edge - maxZone), 2));
+    if (elapsedMs < REORDER_SCROLL_ACCELERATE_AT_MS) return 1;
+    if (elapsedMs >= REORDER_SCROLL_DAMPENING_MS) return proposed;
+    const timeProgress = (elapsedMs - REORDER_SCROLL_ACCELERATE_AT_MS) / (REORDER_SCROLL_DAMPENING_MS - REORDER_SCROLL_ACCELERATE_AT_MS);
+    return Math.ceil(proposed * timeProgress * timeProgress);
+  };
+  if (point <= start + edge) return -speedForDistance(point - start);
+  if (point >= end - edge) return speedForDistance(end - point);
+  return 0;
+}
+export function hasExceededWebReorderMouseThreshold(deltaX, deltaY) {
+  return Math.abs(deltaX) >= REORDER_MOUSE_MOVE_THRESHOLD_PX || Math.abs(deltaY) >= REORDER_MOUSE_MOVE_THRESHOLD_PX;
+}
+function effectiveRows(snapshot) {
+  if (snapshot.rows.length > 0) return snapshot.rows;
+  return snapshot.emptyState ? [snapshot.emptyState] : [];
+}
+function resolvedTheme(snapshot) {
+  return {
+    ...defaultTheme,
+    ...snapshot.theme
+  };
+}
+function paddingValues(snapshot) {
+  const fallback = snapshot.layout.contentPadding ?? 0;
+  return {
+    horizontal: snapshot.layout.contentPaddingHorizontal ?? fallback,
+    top: snapshot.layout.contentPaddingTop ?? fallback,
+    bottom: snapshot.layout.contentPaddingBottom ?? fallback
+  };
+}
+function isStructuralRow(row) {
+  return row.type === 'sectionHeader' || row.type === 'system' || row.type === 'action';
+}
+function sizeModifier(row) {
+  if (row.type === 'sectionHeader' && (row.variant === 'summary' || row.variant === 'gallery')) return 0;
+  if (row.size === 'small') return -8;
+  if (row.size === 'large') return 12;
+  return 0;
+}
+function approximateMessageHeight(row, availableWidth) {
+  if (row.type !== 'message') return 0;
+  const leadingWidth = row.leading ? 52 : 0;
+  const thumbnailWidth = row.thumbnail ? 88 : 0;
+  const charactersPerLine = Math.max(18, Math.floor((availableWidth - leadingWidth - thumbnailWidth - 40) / 7));
+  const titleLines = Math.min(2, Math.max(1, Math.ceil(row.title.length / charactersPerLine)));
+  const bodyLines = Math.min(row.bodyLines ?? 3, Math.max(1, Math.ceil(row.body.length / charactersPerLine)));
+  return 32 + titleLines * 20 + bodyLines * 20 + 22;
+}
+export function estimateWebRowHeight(row, snapshot, availableWidth) {
+  if (row.type === 'system' && row.variant === 'spacer') return row.height;
+  if (row.type === 'walletGroup') return (row.children.length + 1) * 68 + row.children.length * 12;
+  if (row.type === 'identity' && row.presentation === 'walletSidebar') return 68;
+  if (row.type === 'identity' && row.presentation === 'networkSelector') return 47;
+  if (row.type === 'identity' && row.presentation === 'accountSelector') return 58;
+  let base;
+  switch (row.type) {
+    case 'rail':
+      base = 40;
+      break;
+    case 'activity':
+      base = row.footerActions?.length ? 100 : 60;
+      break;
+    case 'message':
+      base = approximateMessageHeight(row, availableWidth);
+      break;
+    case 'mediaTile':
+      base = 244;
+      break;
+    case 'metricCard':
+      base = row.variant === 'activity' ? 161 : row.variant === 'performance' ? 178 : 132;
+      break;
+    case 'sectionHeader':
+      {
+        const isHistory = row.variant === 'history' || row.key.startsWith('history-') || row.sectionKey.startsWith('history-');
+        base = snapshot.layout.kind === 'table' ? 28 : row.presentation === 'networkSelector' ? 47 : isHistory ? 16 : row.variant === 'summary' ? 68 : row.variant === 'gallery' ? 32 : row.checkbox ? 56 : snapshot.layout.kind === 'linear' ? 30 : 36;
+        break;
+      }
+    case 'system':
+      base = row.variant === 'noMatch' || row.variant === 'end' ? 36 : row.variant === 'retry' ? 44 : 56;
+      break;
+    case 'action':
+      base = row.presentation === 'accountSelector' ? 48 : row.icon ? 60 : 44;
+      break;
+    case 'dataRow':
+      base = row.columns.some(column => column.secondaryText) ? 60 : 56;
+      break;
+    case 'identity':
+      base = row.tertiary ? 72 : row.subtitle ? 60 : 56;
+      break;
+    default:
+      base = 56;
+  }
+  const tableAdjustment = snapshot.layout.kind === 'table' && row.type === 'dataRow' && !row.columns.some(column => column.secondaryText) ? -8 : 0;
+  return Math.max(0, base + sizeModifier(row) + tableAdjustment);
+}
+function estimateHorizontalWidth(row) {
+  if (row.type === 'mediaTile') return 200;
+  if (row.type !== 'rail') return 280;
+  const badgeLength = row.badge?.text.length ?? 0;
+  const statusLength = row.status && row.status !== 'none' ? row.status.length : 0;
+  return Math.min(288, Math.max(72, 50 + (row.title.length + badgeLength + statusLength) * 7));
+}
+function sectionIndexEnabled(snapshot) {
+  return Boolean(snapshot.capabilities?.sectionIndex?.enabled && snapshot.layout.kind === 'sectioned' && snapshot.layout.orientation !== 'horizontal' && snapshot.rows.some(row => row.type === 'sectionHeader' && row.indexTitle));
+}
+export function computeWebListLayout(snapshot, viewportWidth, viewportHeight, compactRowKey) {
+  const rows = effectiveRows(snapshot);
+  const horizontal = snapshot.layout.orientation === 'horizontal';
+  const spacing = snapshot.layout.itemSpacing ?? 0;
+  const padding = paddingValues(snapshot);
+  const indexGutter = sectionIndexEnabled(snapshot) ? SECTION_INDEX_GUTTER : 0;
+  const width = Math.max(1, viewportWidth || DEFAULT_VIEWPORT_WIDTH);
+  const height = Math.max(1, viewportHeight || DEFAULT_VIEWPORT_HEIGHT);
+  const availableWidth = Math.max(1, width - padding.horizontal * 2 - indexGutter);
+  const availableHeight = Math.max(1, height - padding.top - padding.bottom);
+  const items = [];
+  if (horizontal) {
+    let x = padding.horizontal;
+    rows.forEach((row, index) => {
+      const itemWidth = estimateHorizontalWidth(row);
+      const rowHeight = row.type === 'walletGroup' && row.key === compactRowKey ? WALLET_REORDER_COMPACT_HEIGHT : estimateWebRowHeight(row, snapshot, availableWidth);
+      items.push({
+        index,
+        key: row.key,
+        x,
+        y: padding.top,
+        width: itemWidth,
+        height: row.type === 'rail' ? Math.min(rowHeight, availableHeight) : availableHeight
+      });
+      x += itemWidth + spacing;
+    });
+    const contentWidth = rows.length > 0 ? x - spacing + padding.horizontal : padding.horizontal * 2;
+    return {
+      items,
+      horizontal: true,
+      contentWidth: Math.max(width, contentWidth),
+      contentHeight: height
+    };
+  }
+  if (snapshot.layout.kind !== 'grid') {
+    let y = padding.top;
+    rows.forEach((row, index) => {
+      const itemHeight = row.type === 'walletGroup' && row.key === compactRowKey ? WALLET_REORDER_COMPACT_HEIGHT : estimateWebRowHeight(row, snapshot, availableWidth);
+      items.push({
+        index,
+        key: row.key,
+        x: padding.horizontal,
+        y,
+        width: availableWidth,
+        height: itemHeight
+      });
+      y += itemHeight + spacing;
+    });
+    const contentHeight = rows.length > 0 ? y - spacing + padding.bottom : padding.top + padding.bottom;
+    return {
+      items,
+      horizontal: false,
+      contentWidth: width,
+      contentHeight: Math.max(height, contentHeight)
+    };
+  }
+  const columns = snapshot.layout.gridColumns ?? 2;
+  const itemWidth = Math.floor((availableWidth - spacing * (columns - 1)) / columns);
+  let y = padding.top;
+  let column = 0;
+  let bandStart = y;
+  let bandHeight = 0;
+  const flushBand = () => {
+    if (column === 0) return;
+    y = bandStart + bandHeight + spacing;
+    column = 0;
+    bandHeight = 0;
+    bandStart = y;
+  };
+  rows.forEach((row, index) => {
+    if (isStructuralRow(row)) {
+      flushBand();
+      const itemHeight = estimateWebRowHeight(row, snapshot, availableWidth);
+      items.push({
+        index,
+        key: row.key,
+        x: padding.horizontal,
+        y,
+        width: availableWidth,
+        height: itemHeight
+      });
+      y += itemHeight + spacing;
+      bandStart = y;
+      return;
+    }
+    const itemHeight = row.type === 'mediaTile' ? itemWidth + 48 : estimateWebRowHeight(row, snapshot, itemWidth);
+    items.push({
+      index,
+      key: row.key,
+      x: padding.horizontal + column * (itemWidth + spacing),
+      y: bandStart,
+      width: itemWidth,
+      height: itemHeight
+    });
+    bandHeight = Math.max(bandHeight, itemHeight);
+    column += 1;
+    if (column === columns) flushBand();
+  });
+  flushBand();
+  const contentHeight = rows.length > 0 ? Math.max(padding.top, y - spacing) + padding.bottom : padding.top + padding.bottom;
+  return {
+    items,
+    horizontal: false,
+    contentWidth: width,
+    contentHeight: Math.max(height, contentHeight)
+  };
+}
+export function webWalletGroupReorderBadge(row) {
+  return row.type === 'walletGroup' && row.children.length > 0 ? '+' + String(row.children.length) : undefined;
+}
+function itemStart(item, horizontal) {
+  return horizontal ? item.x : item.y;
+}
+function itemEnd(item, horizontal) {
+  return itemStart(item, horizontal) + (horizontal ? item.width : item.height);
+}
+export function visibleWebLayoutItems(layout, offset, viewportLength, overscan = 0) {
+  if (layout.items.length === 0) return [];
+  const start = Math.max(0, offset - overscan);
+  const end = offset + viewportLength + overscan;
+  let low = 0;
+  let high = layout.items.length;
+  while (low < high) {
+    const middle = Math.floor((low + high) / 2);
+    if (itemStart(layout.items[middle], layout.horizontal) < start) low = middle + 1;else high = middle;
+  }
+  // Grid items in a band share a start coordinate but can have different
+  // heights. Include the preceding band when any of its items overlaps the
+  // viewport; every earlier band is guaranteed to have ended before it.
+  if (low > 0) {
+    const previousStart = itemStart(layout.items[low - 1], layout.horizontal);
+    let bandStart = low - 1;
+    while (bandStart > 0 && itemStart(layout.items[bandStart - 1], layout.horizontal) === previousStart) bandStart -= 1;
+    if (layout.items.slice(bandStart, low).some(item => itemEnd(item, layout.horizontal) >= start)) low = bandStart;
+  }
+  const visible = [];
+  for (let index = low; index < layout.items.length; index += 1) {
+    const item = layout.items[index];
+    if (itemStart(item, layout.horizontal) > end) break;
+    if (itemEnd(item, layout.horizontal) >= start) visible.push(item);
+  }
+  return visible;
+}
+export function webLayoutItemsForMount(layout, offset, viewportLength, virtualizationEnabled, overscan = 0) {
+  return virtualizationEnabled ? visibleWebLayoutItems(layout, offset, viewportLength, overscan) : layout.items;
+}
+function rowWithoutSelectionState(row) {
+  const copy = {
+    ...row
+  };
+  delete copy.selected;
+  if (row.type === 'sectionHeader' || row.type === 'action' || row.type === 'dataRow') {
+    if (row.checkbox) copy.checkbox = {
+      ...row.checkbox,
+      state: undefined
+    };
+  }
+  if (row.type === 'identity' || row.type === 'action') {
+    copy.trailing = row.trailing?.map(accessory => accessory.kind === 'checkbox' ? {
+      ...accessory,
+      state: undefined
+    } : accessory);
+  }
+  return copy;
+}
+export function webRowRenderSignature(row) {
+  return JSON.stringify(rowWithoutSelectionState(row));
+}
+export const WEB_LIST_CSS = `
+.ok-native-list-root{--nl-bg:#f7f7f7;--nl-row:#fff;--nl-selected:#eaf2ff;--nl-pressed:#e8e8e8;--nl-subdued:#f9f9f9;--nl-strong:#0000000f;--nl-primary:#111;--nl-secondary:#6b7280;--nl-disabled:#8d8d8d;--nl-icon:#111;--nl-icon-subdued:#8d8d8d;--nl-separator:#e5e7eb;--nl-accent:#2f6bff;--nl-positive:#15803d;--nl-negative:#dc2626;--nl-critical:#feecec;--nl-inverse:#202020;--nl-inverse-text:#fcfcfc;--nl-info:#0d74ce;position:absolute;inset:0;display:flex;min-width:0;min-height:0;overflow:hidden;background:var(--nl-bg);color:var(--nl-primary);font-family:Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
+.ok-native-list-viewport-frame{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden}
+.ok-native-list-viewport{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
+.ok-native-list-content{position:relative;min-width:100%;min-height:100%}
+.ok-native-list-item{position:absolute;box-sizing:border-box;contain:layout paint style;outline:none}
+.ok-native-list-row{width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;gap:12px;overflow:hidden;background:var(--nl-row);color:var(--nl-primary);cursor:pointer;user-select:none;-webkit-user-select:none}
+.ok-native-list-item[data-table-alternate="true"]>.ok-native-list-row{background:var(--nl-bg)}
+.ok-native-list-item[data-native-list-selected="true"]>.ok-native-list-row{background:var(--nl-selected)}
+.ok-native-list-item[data-native-list-disabled="true"]>.ok-native-list-row{opacity:.5;cursor:default}
+.ok-native-list-item:not([data-native-list-disabled="true"]):hover>.ok-native-list-row{background:var(--nl-pressed)}
+.ok-native-list-item:not([data-native-list-disabled="true"]):not([data-native-list-selected="true"]):hover>.ok-native-list-wallet-row{background:var(--nl-strong)}
+.ok-native-list-item:not([data-native-list-disabled="true"]):not([data-native-list-selected="true"]):active>.ok-native-list-wallet-row{background:var(--nl-pressed)}
+.ok-native-list-item[data-native-list-selected="true"]:hover>.ok-native-list-wallet-row{background:var(--nl-selected)}
+.ok-native-list-wallet-group{display:flex;width:100%;height:100%;box-sizing:border-box;flex-direction:column;gap:12px;overflow:hidden;border:1px solid var(--nl-separator);border-radius:12px;background:var(--nl-subdued);user-select:none;-webkit-user-select:none}
+.ok-native-list-wallet-member{flex:0 0 68px;height:68px;overflow:hidden;border-radius:12px;background:transparent;cursor:pointer}
+.ok-native-list-wallet-member>.ok-native-list-wallet-row{height:100%;background:transparent}
+.ok-native-list-wallet-member[data-native-list-selected="true"]>.ok-native-list-wallet-row{background:var(--nl-selected)}
+.ok-native-list-wallet-member:not([data-native-list-selected="true"]):hover>.ok-native-list-wallet-row{background:var(--nl-strong)}
+.ok-native-list-wallet-member:not([data-native-list-selected="true"]):active>.ok-native-list-wallet-row{background:var(--nl-pressed)}
+.ok-native-list-item:focus-visible>.ok-native-list-row{outline:2px solid var(--nl-accent);outline-offset:-2px}
+.ok-native-list-item[data-native-list-reorderable="true"]>.ok-native-list-row{cursor:grab}
+.ok-native-list-root[data-native-list-dragging="true"] .ok-native-list-row{cursor:grabbing}
+.ok-native-list-item[data-native-list-animate-reorder="true"]{transition:transform ${WEB_REORDER_ANIMATION.outOfWayDurationMs}ms ${WEB_REORDER_ANIMATION.outOfWayTimingFunction},height ${WEB_REORDER_ANIMATION.outOfWayDurationMs}ms ${WEB_REORDER_ANIMATION.outOfWayTimingFunction}}
+.ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-row{overflow:hidden;border-radius:12px;background:var(--nl-row)}
+.ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-row>*{visibility:hidden}
+.ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-wallet-group{border-color:transparent;background:var(--nl-row)}
+.ok-native-list-item[data-native-list-dragging="true"]>.ok-native-list-wallet-group>*{visibility:hidden}
+.ok-native-list-reorder-preview{position:fixed;left:0;top:0;z-index:100001;pointer-events:none;overflow:hidden;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.12);transform-origin:center;will-change:transform;font-family:Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
+.ok-native-list-reorder-preview>.ok-native-list-row{background:var(--nl-row);cursor:grabbing}
+.ok-native-list-reorder-preview[data-native-list-selected="true"]>.ok-native-list-row{background:var(--nl-selected)}
+.ok-native-list-reorder-count{position:absolute;right:4px;bottom:4px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:24px;height:24px;padding:0 6px;border:1px solid var(--nl-row);border-radius:12px;background:var(--nl-inverse);color:var(--nl-inverse-text);font-size:12px;line-height:22px;font-weight:600}
+.ok-native-list-item[data-separator="true"]>.ok-native-list-row{border-bottom:1px solid var(--nl-separator)}
+.ok-native-list-item[data-group-position="first"]>.ok-native-list-row{border-radius:12px 12px 0 0}
+.ok-native-list-item[data-group-position="last"]>.ok-native-list-row{border-radius:0 0 12px 12px}
+.ok-native-list-item[data-group-position="single"]>.ok-native-list-row{border-radius:12px}
+.ok-native-list-standard{padding:8px 12px}.ok-native-list-network-row{padding:0 12px}.ok-native-list-wallet-row{padding:4px 8px;flex-direction:column;justify-content:center;gap:4px}.ok-native-list-account-row{padding:4px 12px;gap:8px}
+.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}.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}.ok-native-list-account-row .ok-native-list-secondary{font-size:14px;line-height:20px;font-weight:400}
+.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}.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}
+.ok-native-list-value{font-size:14px;line-height:20px;font-weight:500;white-space:nowrap}.ok-native-list-time{font-size:11px;line-height:16px;color:var(--nl-secondary);align-self:flex-start}.ok-native-list-amounts{display:flex;flex-direction:column;align-items:flex-end;min-width:0}.ok-native-list-actions{display:flex;gap:16px;margin-top:6px}
+.ok-native-list-action-button{appearance:none;border:0;background:transparent;padding:2px;color:var(--nl-accent);font:600 12px/16px inherit;cursor:pointer}.ok-native-list-action-button[data-tone="danger"]{color:var(--nl-negative)}.ok-native-list-action-button:disabled{opacity:.5;cursor:default}
+.ok-native-list-visual{position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:20px;overflow:visible;background:var(--nl-strong)}.ok-native-list-visual>img,.ok-native-list-visual-main{display:block;width:40px;height:40px;border-radius:inherit;object-fit:cover}.ok-native-list-visual-fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;border-radius:inherit;color:var(--nl-primary);font-size:15px;font-weight:600;overflow:hidden}.ok-native-list-visual>.ok-native-list-visual-corner{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;padding:2px;border-radius:50%;background:var(--nl-row);object-fit:cover}.ok-native-list-stacked{display:flex;align-items:center;width:48px;flex-basis:48px}.ok-native-list-stacked img{width:28px;height:28px;border:2px solid var(--nl-row);border-radius:50%;object-fit:cover;margin-left:-10px}.ok-native-list-stacked img:first-child{margin-left:0}
+.ok-native-list-accessories{display:flex;align-items:center;gap:10px;min-width:0}.ok-native-list-accessory{font-size:14px;color:var(--nl-primary);white-space:nowrap}.ok-native-list-accessory-secondary{color:var(--nl-secondary)}.ok-native-list-icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border:0;background:transparent;color:var(--nl-icon);font-size:20px;line-height:1;font-weight:500;font-family:inherit;cursor:pointer}.ok-native-list-checkbox{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:20px;height:20px;border:2px solid color-mix(in srgb,var(--nl-primary) 19%,transparent);border-radius:5px;background:var(--nl-row);cursor:pointer}.ok-native-list-checkbox[data-state="checked"],.ok-native-list-checkbox[data-state="indeterminate"]{border-color:transparent;background:var(--nl-primary)}.ok-native-list-checkbox[data-state="checked"]::after{content:"";width:6px;height:10px;margin-top:-2px;border-right:2px solid var(--nl-row);border-bottom:2px solid var(--nl-row);transform:rotate(45deg)}.ok-native-list-checkbox[data-state="indeterminate"]::after{content:"";width:8px;height:2px;border-radius:1px;background:var(--nl-row)}.ok-native-list-spinner{width:16px;height:16px;border:2px solid var(--nl-separator);border-top-color:var(--nl-primary);border-radius:50%;animation:ok-native-list-spin .8s linear infinite}@keyframes ok-native-list-spin{to{transform:rotate(360deg)}}
+.ok-native-list-badge{display:inline-flex;align-items:center;max-width:100%;height:18px;padding:0 5px;border-radius:5px;background:color-mix(in srgb,var(--nl-accent) 12%,transparent);color:var(--nl-accent);font-size:11px;line-height:18px;white-space:nowrap}.ok-native-list-badge[data-tone="danger"]{background:var(--nl-critical);color:var(--nl-negative)}.ok-native-list-badges{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle}
+.ok-native-list-section{padding:0 8px;background:var(--nl-bg);gap:8px}.ok-native-list-section[data-variant="summary"]{padding:0 20px}.ok-native-list-section[data-variant="gallery"]{padding:0 12px}.ok-native-list-section[data-variant="history"]{padding:0 8px}.ok-native-list-section-title{font-size:13px;line-height:18px;font-weight:700;color:var(--nl-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ok-native-list-section[data-variant="summary"] .ok-native-list-section-title{font-size:16px;font-weight:500;color:var(--nl-primary)}.ok-native-list-section[data-variant="gallery"] .ok-native-list-section-title{font-size:16px;color:var(--nl-primary)}.ok-native-list-section[data-variant="history"] .ok-native-list-section-title{font-size:12px;line-height:16px}.ok-native-list-section-value{margin-left:auto}
+.ok-native-list-action-row{justify-content:space-between;padding:0 16px}.ok-native-list-action-title{font-size:15px;font-weight:600;color:var(--nl-accent)}.ok-native-list-action-title[data-tone="danger"]{color:var(--nl-negative)}
+.ok-native-list-account-action-row{justify-content:flex-start;gap:12px;padding:0 12px}.ok-native-list-account-action-row .ok-native-list-action-title{color:var(--nl-secondary);font-size:16px;line-height:24px;font-weight:400}
+.ok-native-list-system{justify-content:center;padding:8px 12px;background:var(--nl-bg);color:var(--nl-secondary);cursor:default}.ok-native-list-system[data-variant="retry"],.ok-native-list-system[data-variant="noMatch"],.ok-native-list-system[data-variant="end"]{justify-content:flex-start}.ok-native-list-system[data-variant="retry"]{cursor:pointer}
+.ok-native-list-rail{padding:4px;gap:6px;border-radius:8px}.ok-native-list-rail .ok-native-list-visual{width:20px;height:20px;flex-basis:20px}.ok-native-list-rail .ok-native-list-visual>img,.ok-native-list-rail .ok-native-list-visual-main{width:20px;height:20px}.ok-native-list-rail-title{font-size:12px;font-weight:500;white-space:nowrap}
+.ok-native-list-media{display:block;padding:0 5px;background:transparent;border-radius:16px}.ok-native-list-media-image{display:block;width:100%;aspect-ratio:1;border-radius:10px;background:var(--nl-strong);object-fit:cover}.ok-native-list-media-image[data-state="empty"]{background:transparent}.ok-native-list-media-image[data-state="error"]{display:flex;align-items:center;justify-content:center;color:var(--nl-icon-subdued);font-size:24px}.ok-native-list-media-meta{padding-top:7px}.ok-native-list-media-subtitle-row{display:flex;align-items:center;gap:6px}.ok-native-list-media-subtitle{flex:1;min-width:0;font-size:12px;color:var(--nl-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ok-native-list-media-network{width:14px;height:14px;border-radius:50%}.ok-native-list-media-title{font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ok-native-list-media-close{position:absolute;right:9px;top:4px;border:0;background:color-mix(in srgb,var(--nl-inverse) 72%,transparent);color:var(--nl-inverse-text);width:24px;height:24px;border-radius:50%;font:18px/20px inherit;cursor:pointer}
+.ok-native-list-metric{display:flex;flex-direction:column;align-items:flex-start;padding:12px;border-radius:12px;gap:5px;background:var(--nl-row)}.ok-native-list-metric-value{font-size:22px;line-height:28px;font-weight:700}.ok-native-list-composite{display:flex;flex-direction:column;align-items:stretch;padding:14px;border-radius:12px;gap:12px;background:var(--nl-subdued)}.ok-native-list-composite-heading{font-size:14px;letter-spacing:1px;color:var(--nl-secondary)}.ok-native-list-composite-row{display:flex;gap:12px}.ok-native-list-composite-cell{flex:1;min-width:0}.ok-native-list-composite-cell[data-shaded="true"]{padding:10px;border-radius:10px;background:color-mix(in srgb,var(--nl-primary) 5%,transparent)}.ok-native-list-composite-value{font-size:18px;font-weight:600}.ok-native-list-divider{height:1px;background:var(--nl-separator)}.ok-native-list-progress{height:4px;border-radius:2px;overflow:hidden;background:var(--nl-negative)}.ok-native-list-progress>span{display:block;height:100%;border-radius:2px;background:var(--nl-positive)}
+.ok-native-list-data{padding:6px 12px}.ok-native-list-index{flex:0 0 28px;color:var(--nl-secondary);font-size:13px}.ok-native-list-favorite{flex:0 0 24px;color:var(--nl-icon-subdued);font-size:22px}.ok-native-list-favorite[data-active="true"]{color:var(--nl-accent)}.ok-native-list-data-cell{display:flex;flex-direction:column;min-width:0}.ok-native-list-data-cell[data-align="center"]{align-items:center}.ok-native-list-data-cell[data-align="end"]{align-items:flex-end}.ok-native-list-data-primary{display:flex;align-items:center;gap:5px;max-width:100%;font-size:16px;font-weight:500;white-space:nowrap}.ok-native-list-unread{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--nl-accent)}.ok-native-list-thumbnail{width:64px;height:64px;border-radius:10px;object-fit:cover}
+.ok-native-list-footer{flex:0 0 auto;min-height:0}.ok-native-list-sticky{position:absolute;z-index:4;left:0;right:0;top:0;pointer-events:auto;box-shadow:0 1px 0 var(--nl-separator)}.ok-native-list-index-rail{position:absolute;z-index:6;top:0;right:0;bottom:0;width:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;touch-action:none}.ok-native-list-index-rail[hidden]{display:none}.ok-native-list-index-button{appearance:none;border:0;background:transparent;display:flex;flex:1;max-height:22px;min-height:12px;width:100%;align-items:center;justify-content:center;padding:0;color:var(--nl-secondary);font:600 11px/1 inherit;cursor:pointer}.ok-native-list-index-button[data-active="true"]{color:var(--nl-accent)}.ok-native-list-index-preview{position:absolute;z-index:8;left:50%;top:50%;display:flex;width:72px;height:72px;align-items:center;justify-content:center;transform:translate(-50%,-50%) scale(.92);border-radius:16px;background:var(--nl-inverse);color:var(--nl-inverse-text);font-size:28px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}.ok-native-list-index-preview[data-visible="true"]{opacity:1;transform:translate(-50%,-50%) scale(1)}
+.ok-native-list-refresh{position:absolute;z-index:7;left:50%;top:8px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--nl-inverse);color:var(--nl-inverse-text);font-size:12px;opacity:0;transform:translate(-50%,-16px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}.ok-native-list-refresh[data-visible="true"]{opacity:1;transform:translate(-50%,0)}
+@media (prefers-reduced-motion:reduce){.ok-native-list-index-preview,.ok-native-list-refresh{transition:none}.ok-native-list-spinner{animation:none}}
+`;
+function createElement(document, tag, className, text) {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  if (text !== undefined) element.textContent = text;
+  return element;
+}
+function setData(element, name, value) {
+  if (value === undefined) delete element.dataset[name];else element.dataset[name] = String(value);
+}
+function safeImageUri(uri) {
+  const trimmed = uri.trim();
+  if (/^(https?:|data:image\/|blob:|file:)/i.test(trimmed) || trimmed.startsWith('/')) return trimmed;
+  return undefined;
+}
+function createImage(context, source, className) {
+  const uri = safeImageUri(source.uri);
+  if (!uri) return undefined;
+  const image = context.document.createElement('img');
+  if (className) image.className = className;
+  image.src = uri;
+  image.alt = '';
+  image.draggable = false;
+  image.loading = 'lazy';
+  image.decoding = 'async';
+  image.style.objectFit = source.contentFit === 'fill' ? 'fill' : source.contentFit ?? 'cover';
+  return image;
+}
+function iconGlyph(name) {
+  const normalized = name.toLocaleLowerCase();
+  if (normalized.includes('chevron')) {
+    if (normalized.includes('top')) return '⌃';
+    if (normalized.includes('bottom')) return '⌄';
+    return '›';
+  }
+  if (normalized.includes('plus') || normalized.includes('add')) return '+';
+  if (normalized.includes('minus')) return '−';
+  if (normalized.includes('star')) return '☆';
+  if (normalized.includes('drag') || normalized.includes('grabber')) return '≡';
+  if (normalized.includes('dot') || normalized.includes('more')) return '•••';
+  if (normalized.includes('pencil') || normalized.includes('edit')) return '✎';
+  if (normalized.includes('error') || normalized.includes('exclamation')) return '!';
+  if (normalized.includes('info')) return 'i';
+  if (normalized.includes('question')) return '?';
+  if (normalized.includes('swap')) return '⇄';
+  if (normalized.includes('trend') || normalized.includes('arrow')) return '↗';
+  return name.slice(0, 1).toLocaleUpperCase();
+}
+function visualFromRow(row) {
+  if (row.type === 'identity') return row.leading;
+  if (row.type === 'rail') return row.visual;
+  if (row.type === 'activity') return row.leading;
+  if (row.type === 'message') return row.leading;
+  if (row.type === 'dataRow') return row.leading;
+  if (row.type === 'metricCard') return row.visual;
+  return undefined;
+}
+function createVisual(context, visual) {
+  if (!visual) return undefined;
+  if (visual.kind === 'stackedImages') {
+    const stack = createElement(context.document, 'span', 'ok-native-list-stacked');
+    visual.images.forEach(source => {
+      const image = createImage(context, source);
+      if (image) stack.appendChild(image);
+    });
+    return stack;
+  }
+  const frame = createElement(context.document, 'span', 'ok-native-list-visual');
+  const shape = visual.kind === 'icon' ? 'circle' : visual.shape ?? 'circle';
+  frame.style.borderRadius = shape === 'square' ? '0' : shape === 'rounded' ? '10px' : '50%';
+  if (visual.kind === 'icon') {
+    frame.style.background = visual.backgroundColor ?? 'var(--nl-strong)';
+    const fallback = createElement(context.document, 'span', 'ok-native-list-visual-fallback', iconGlyph(visual.name));
+    if (visual.tintColor) fallback.style.color = visual.tintColor;
+    frame.appendChild(fallback);
+    return frame;
+  }
+  if ('backgroundColor' in visual && visual.backgroundColor) frame.style.background = visual.backgroundColor;
+  const source = visual.kind === 'image' ? visual.image : visual.image;
+  const image = source ? createImage(context, source) : undefined;
+  if (image) {
+    image.className = 'ok-native-list-visual-main';
+    frame.appendChild(image);
+  } else {
+    frame.appendChild(createElement(context.document, 'span', 'ok-native-list-visual-fallback', 'fallbackText' in visual ? visual.fallbackText ?? '' : ''));
+  }
+  if (visual.kind === 'token' && visual.networkImage) {
+    const corner = createImage(context, visual.networkImage, 'ok-native-list-visual-corner');
+    if (corner) frame.appendChild(corner);
+  } else if ('cornerIcon' in visual && visual.cornerIcon) {
+    const corner = createElement(context.document, 'span', 'ok-native-list-visual-corner ok-native-list-visual-fallback', iconGlyph(visual.cornerIcon.name));
+    if (visual.cornerIcon.tintColor) corner.style.color = visual.cornerIcon.tintColor;
+    if (visual.cornerIcon.backgroundColor) corner.style.background = visual.cornerIcon.backgroundColor;
+    frame.appendChild(corner);
+  }
+  return frame;
+}
+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 createBadge(context, badge) {
+  const element = createElement(context.document, 'span', 'ok-native-list-badge', badge.text);
+  setData(element, 'tone', badge.tone);
+  return element;
+}
+function selectionKeysForTarget(target, rowKey, snapshot) {
+  if (!target || target.scope === 'row') {
+    return snapshot.rows.some(row => row.key === rowKey && isSelectableRow(row)) ? [rowKey] : [];
+  }
+  if (target.scope === 'section') {
+    return snapshot.rows.filter(row => row.sectionKey === target.sectionKey && isSelectableRow(row)).map(row => row.key);
+  }
+  return snapshot.rows.filter(isSelectableRow).map(row => row.key);
+}
+function checkboxState(target, fallback, rowKey, snapshot, selectedKeys) {
+  if (target?.scope === 'section') {
+    return checkboxStateForSection(target.sectionKey, snapshot.rows, selectedKeys);
+  }
+  return checkboxStateForKeys(selectionKeysForTarget(target, rowKey, snapshot), selectedKeys);
+}
+function createCheckbox(context, rowKey, accessory) {
+  if (accessory.loading) {
+    const spinner = createElement(context.document, 'span', 'ok-native-list-spinner');
+    spinner.setAttribute('aria-label', 'Loading');
+    return spinner;
+  }
+  const state = checkboxState(accessory.target, accessory.state, rowKey, context.snapshot, context.selectedKeys);
+  const element = createElement(context.document, 'button', 'ok-native-list-checkbox');
+  element.setAttribute('type', 'button');
+  element.setAttribute('role', 'checkbox');
+  element.setAttribute('aria-checked', state === 'indeterminate' ? 'mixed' : String(state === 'checked'));
+  element.setAttribute('aria-label', 'Select');
+  element.toggleAttribute('disabled', Boolean(accessory.disabled));
+  setData(element, 'state', state);
+  setData(element, 'checkboxFallback', accessory.state);
+  setData(element, 'nativeListAction', accessory.actionKey ?? 'selection');
+  setData(element, 'selectionScope', accessory.target?.scope ?? 'row');
+  if (accessory.target?.scope === 'section') setData(element, 'selectionKey', accessory.target.sectionKey);else if (accessory.target?.scope === 'row') setData(element, 'selectionKey', rowKey);
+  return element;
+}
+function createIconAction(context, name, actionKey, disabled, tintColor) {
+  const element = createElement(context.document, actionKey ? 'button' : 'span', 'ok-native-list-icon-button', iconGlyph(name));
+  if (element.tagName === 'BUTTON') {
+    element.setAttribute('type', 'button');
+    element.toggleAttribute('disabled', Boolean(disabled));
+  }
+  if (actionKey) setData(element, 'nativeListAction', actionKey);
+  if (tintColor) element.style.color = tintColor;
+  return element;
+}
+function markActionAnchorSource(element, source, slot) {
+  setData(element, 'nativeListAnchorSource', source);
+  if (slot !== undefined) setData(element, 'nativeListAnchorSlot', slot);
+}
+function createAccessory(context, rowKey, accessory, slot) {
+  if (accessory.kind === 'checkbox') {
+    const element = createCheckbox(context, rowKey, accessory);
+    markActionAnchorSource(element, 'trailingAccessory', slot);
+    return element;
+  }
+  if (accessory.kind === 'icon') {
+    const element = createIconAction(context, accessory.name, accessory.actionKey, accessory.disabled, accessory.tintColor);
+    markActionAnchorSource(element, 'trailingAccessory', slot);
+    return element;
+  }
+  if (accessory.kind === 'spinner') {
+    return createElement(context.document, 'span', 'ok-native-list-spinner');
+  }
+  const actionKey = 'actionKey' in accessory ? accessory.actionKey : undefined;
+  const element = createElement(context.document, actionKey ? 'button' : 'span', 'ok-native-list-accessory');
+  if (element.tagName === 'BUTTON') {
+    element.setAttribute('type', 'button');
+    element.classList.add('ok-native-list-icon-button');
+    setData(element, 'nativeListAction', actionKey);
+  }
+  switch (accessory.kind) {
+    case 'value':
+      element.textContent = accessory.text;
+      if (accessory.secondary) element.classList.add('ok-native-list-accessory-secondary');
+      break;
+    case 'valuePair':
+      {
+        const primary = createElement(context.document, 'span', undefined, accessory.primary);
+        primary.style.color = toneColor(accessory.primaryTone, 'primary');
+        const secondary = createElement(context.document, 'span', 'ok-native-list-secondary', accessory.secondary);
+        secondary.style.color = toneColor(accessory.secondaryTone, 'secondary');
+        element.replaceChildren(primary, secondary);
+        element.classList.add('ok-native-list-amounts');
+        break;
+      }
+    case 'radio':
+      element.textContent = accessory.checked ? '●' : '○';
+      break;
+    case 'switch':
+      element.textContent = accessory.value ? 'ON' : 'OFF';
+      setData(element, 'nativeListAction', accessory.actionKey);
+      break;
+    case 'chevron':
+      element.textContent = '›';
+      break;
+    case 'menu':
+      element.textContent = '⋮';
+      break;
+    case 'drag':
+      element.textContent = '≡';
+      break;
+    case 'progress':
+      element.textContent = String(Math.round(accessory.value * 100)) + '%';
+      break;
+  }
+  if (actionKey) markActionAnchorSource(element, 'trailingAccessory', slot);
+  return element;
+}
+function appendAccessories(parent, context, rowKey, accessories) {
+  if (!accessories?.length) return;
+  const container = createElement(context.document, 'span', 'ok-native-list-accessories');
+  accessories.forEach((accessory, slot) => container.appendChild(createAccessory(context, rowKey, accessory, slot)));
+  parent.appendChild(container);
+}
+function createTextColumn(context, title, subtitle, tertiary, tertiaryTone, badges) {
+  const column = createElement(context.document, 'span', 'ok-native-list-flex');
+  const titleLine = createElement(context.document, 'span', 'ok-native-list-title', title);
+  if (badges?.length) {
+    const badgeLine = createElement(context.document, 'span', 'ok-native-list-badges');
+    badges.forEach(badge => badgeLine.appendChild(createBadge(context, badge)));
+    titleLine.appendChild(badgeLine);
+  }
+  column.appendChild(titleLine);
+  if (subtitle) column.appendChild(createElement(context.document, 'span', 'ok-native-list-secondary', subtitle));
+  if (tertiary) {
+    const element = createElement(context.document, 'span', tertiaryTone === 'info' ? 'ok-native-list-secondary ok-native-list-info' : 'ok-native-list-secondary ok-native-list-tertiary', tertiary);
+    column.appendChild(element);
+  }
+  return column;
+}
+function createSectionHeader(context, row) {
+  const body = createElement(context.document, 'div', 'ok-native-list-row ok-native-list-section');
+  setData(body, 'variant', row.variant);
+  if (row.titleIcon) {
+    const titleIcon = createIconAction(context, row.titleIcon.name, row.titleIcon.actionKey, row.titleIcon.disabled, row.titleIcon.tintColor);
+    markActionAnchorSource(titleIcon, 'leadingAction');
+    body.appendChild(titleIcon);
+  }
+  body.appendChild(createTextColumn(context, row.title, row.subtitle));
+  if (row.value) {
+    const value = createElement(context.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);
+    if (row.valueActionKey) {
+      value.setAttribute('type', 'button');
+      setData(value, 'nativeListAction', row.valueActionKey);
+      markActionAnchorSource(value, 'trailingAccessory', 0);
+    }
+    body.appendChild(value);
+  }
+  if (row.valueIcon) {
+    const valueIcon = createIconAction(context, row.valueIcon.name, row.valueIcon.actionKey, row.valueIcon.disabled, row.valueIcon.tintColor);
+    markActionAnchorSource(valueIcon, 'trailingAccessory', 1);
+    body.appendChild(valueIcon);
+  }
+  if (row.checkbox) body.appendChild(createCheckbox(context, row.key, row.checkbox));
+  return body;
+}
+function createActionRow(context, row) {
+  const body = createElement(context.document, 'div', ['ok-native-list-row', 'ok-native-list-action-row', row.presentation === 'accountSelector' ? 'ok-native-list-account-action-row' : ''].filter(Boolean).join(' '));
+  if (row.icon) body.appendChild(createVisual(context, row.icon));
+  const title = createElement(context.document, 'span', 'ok-native-list-action-title', row.title);
+  setData(title, 'tone', row.tone);
+  body.appendChild(title);
+  if (row.checkbox) body.appendChild(createCheckbox(context, row.key, row.checkbox));
+  appendAccessories(body, context, row.key, row.trailing);
+  return body;
+}
+function createSystemRow(context, row) {
+  const body = createElement(context.document, 'div', 'ok-native-list-row ok-native-list-system');
+  setData(body, 'variant', row.variant);
+  if (row.variant === 'loading') body.appendChild(createElement(context.document, 'span', 'ok-native-list-spinner'));
+  const message = row.variant === 'spacer' ? '' : row.message ?? (row.variant === 'end' ? 'End' : '');
+  if (message) body.appendChild(createElement(context.document, 'span', 'ok-native-list-secondary', message));
+  return body;
+}
+function createRailRow(context, row) {
+  const body = createElement(context.document, 'div', 'ok-native-list-row ok-native-list-rail');
+  const visual = createVisual(context, row.visual);
+  if (visual) body.appendChild(visual);
+  body.appendChild(createElement(context.document, 'span', 'ok-native-list-rail-title', row.title));
+  if (row.status && row.status !== 'none') body.appendChild(createElement(context.document, 'span', 'ok-native-list-secondary', row.status));
+  if (row.badge) body.appendChild(createBadge(context, row.badge));
+  return body;
+}
+function createMediaRow(context, row) {
+  const body = createElement(context.document, 'div', 'ok-native-list-row ok-native-list-media');
+  if (row.image && !row.imageState) {
+    const image = createImage(context, row.image, 'ok-native-list-media-image');
+    if (image) body.appendChild(image);
+  } else {
+    const placeholder = createElement(context.document, 'span', 'ok-native-list-media-image', row.imageState === 'error' ? '▧' : '');
+    setData(placeholder, 'state', row.imageState ?? 'empty');
+    body.appendChild(placeholder);
+  }
+  const metadata = createElement(context.document, 'div', 'ok-native-list-media-meta');
+  const subtitleLine = createElement(context.document, 'div', 'ok-native-list-media-subtitle-row');
+  subtitleLine.appendChild(createElement(context.document, 'span', 'ok-native-list-media-subtitle', row.subtitle || '-'));
+  if (row.networkImage) {
+    const network = createImage(context, row.networkImage, 'ok-native-list-media-network');
+    if (network) subtitleLine.appendChild(network);
+  }
+  metadata.appendChild(subtitleLine);
+  metadata.appendChild(createElement(context.document, 'div', 'ok-native-list-media-title', row.title));
+  if (row.badge) metadata.appendChild(createBadge(context, row.badge));
+  body.appendChild(metadata);
+  if (row.closeActionKey) {
+    const close = createElement(context.document, 'button', 'ok-native-list-media-close', '×');
+    close.setAttribute('type', 'button');
+    close.setAttribute('aria-label', 'Close');
+    setData(close, 'nativeListAction', row.closeActionKey);
+    markActionAnchorSource(close, 'mediaClose');
+    body.appendChild(close);
+  }
+  return body;
+}
+function createMetricCell(context, metric, shaded) {
+  const cell = createElement(context.document, 'div', 'ok-native-list-composite-cell');
+  setData(cell, 'shaded', shaded);
+  cell.appendChild(createElement(context.document, 'div', 'ok-native-list-secondary', metric.label));
+  const valueLine = createElement(context.document, 'div');
+  valueLine.style.display = 'flex';
+  valueLine.style.alignItems = 'center';
+  valueLine.style.gap = '6px';
+  if (metric.visual) {
+    const visual = createVisual(context, metric.visual);
+    if (visual) {
+      visual.style.width = '16px';
+      visual.style.height = '16px';
+      visual.style.flexBasis = '16px';
+      const image = visual.querySelector('img');
+      if (image) {
+        image.style.width = '16px';
+        image.style.height = '16px';
+      }
+      valueLine.appendChild(visual);
+    }
+  }
+  const value = createElement(context.document, 'span', 'ok-native-list-composite-value', metric.value);
+  value.style.color = toneColor(metric.tone, 'primary');
+  valueLine.appendChild(value);
+  cell.appendChild(valueLine);
+  return cell;
+}
+function createMetricRow(context, row) {
+  if (row.variant === 'activity' || row.variant === 'performance') {
+    const body = createElement(context.document, 'div', 'ok-native-list-row ok-native-list-composite');
+    body.appendChild(createElement(context.document, 'div', 'ok-native-list-composite-heading', row.title));
+    const metrics = row.metrics ?? [];
+    const firstLine = createElement(context.document, 'div', 'ok-native-list-composite-row');
+    metrics.slice(0, 2).forEach(metric => firstLine.appendChild(createMetricCell(context, metric, false)));
+    body.appendChild(firstLine);
+    if (row.variant === 'activity') {
+      body.appendChild(createElement(context.document, 'div', 'ok-native-list-divider'));
+    } else {
+      const progress = createElement(context.document, 'div', 'ok-native-list-progress');
+      const fill = createElement(context.document, 'span');
+      fill.style.width = String(Math.round((row.progress ?? 0) * 100)) + '%';
+      progress.appendChild(fill);
+      body.appendChild(progress);
+    }
+    const secondLine = createElement(context.document, 'div', 'ok-native-list-composite-row');
+    metrics.slice(2).forEach(metric => secondLine.appendChild(createMetricCell(context, metric, row.variant === 'performance')));
+    body.appendChild(secondLine);
+    return body;
+  }
+  const body = createElement(context.document, 'div', 'ok-native-list-row ok-native-list-metric');
+  if (row.visual) {
+    const visual = createVisual(context, row.visual);
+    if (visual) body.appendChild(visual);
+  }
+  body.appendChild(createElement(context.document, 'div', 'ok-native-list-secondary', row.title));
+  body.appendChild(createElement(context.document, 'div', 'ok-native-list-metric-value', row.value));
+  if (row.trend) {
+    const trend = createElement(context.document, 'div', 'ok-native-list-secondary', row.trend);
+    trend.style.color = row.trendTone === 'positive' ? 'var(--nl-positive)' : row.trendTone === 'negative' ? 'var(--nl-negative)' : 'var(--nl-secondary)';
+    body.appendChild(trend);
+  }
+  if (row.subtitle) body.appendChild(createElement(context.document, 'div', 'ok-native-list-secondary', row.subtitle));
+  if (row.badge) body.appendChild(createBadge(context, row.badge));
+  return body;
+}
+function createDataRow(context, row) {
+  const body = createElement(context.document, 'div', 'ok-native-list-row ok-native-list-data');
+  if (row.checkbox) body.appendChild(createCheckbox(context, row.key, row.checkbox));
+  if (row.index !== undefined) body.appendChild(createElement(context.document, 'span', 'ok-native-list-index', String(row.index)));
+  if (row.favorite) {
+    const favorite = createElement(context.document, 'span', 'ok-native-list-favorite', row.favoriteActive ? '★' : '☆');
+    setData(favorite, 'active', row.favoriteActive);
+    body.appendChild(favorite);
+  }
+  if (row.leading) {
+    const visual = createVisual(context, row.leading);
+    if (visual) body.appendChild(visual);
+  }
+  row.columns.forEach(column => {
+    const cell = createElement(context.document, 'span', 'ok-native-list-data-cell');
+    cell.style.flex = String(column.weight ?? 1);
+    setData(cell, 'align', column.alignment ?? 'start');
+    const primary = createElement(context.document, 'span', 'ok-native-list-data-primary');
+    primary.style.color = toneColor(column.tone, 'primary');
+    if (column.secondaryLeadingText) primary.appendChild(createElement(context.document, 'span', 'ok-native-list-secondary', column.secondaryLeadingText));
+    primary.appendChild(createElement(context.document, 'span', undefined, column.text));
+    if (column.key === 'asset' && row.badges?.length) {
+      row.badges.forEach(badge => primary.appendChild(createBadge(context, badge)));
+    }
+    cell.appendChild(primary);
+    if (column.secondaryText) {
+      const secondary = createElement(context.document, 'span', 'ok-native-list-secondary', column.secondaryText);
+      secondary.style.color = toneColor(column.secondaryTone, 'secondary');
+      cell.appendChild(secondary);
+    }
+    body.appendChild(cell);
+  });
+  return body;
+}
+function createIdentityActivityOrMessageRow(context, row) {
+  const presentation = row.type === 'identity' ? row.presentation : undefined;
+  const body = createElement(context.document, 'div', ['ok-native-list-row', 'ok-native-list-standard', row.type === 'identity' && !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(' '));
+  if (row.type === 'identity' && row.leadingAction) {
+    const action = createIconAction(context, row.leadingAction.name, row.leadingAction.actionKey, row.leadingAction.disabled, row.leadingAction.tintColor);
+    markActionAnchorSource(action, 'leadingAction');
+    body.appendChild(action);
+  }
+  const visual = createVisual(context, visualFromRow(row));
+  if (visual) body.appendChild(visual);
+  if (row.type === 'activity' && row.secondaryLeading) {
+    const secondVisual = createVisual(context, row.secondaryLeading);
+    if (secondVisual) body.appendChild(secondVisual);
+  }
+  if (row.type === 'message' && row.unread) body.appendChild(createElement(context.document, 'span', 'ok-native-list-unread'));
+  const title = row.title;
+  const subtitle = row.type === 'identity' ? row.subtitle : row.type === 'activity' ? row.description : row.body;
+  const column = createTextColumn(context, title, subtitle, row.type === 'identity' ? row.tertiary : undefined, row.type === 'identity' ? row.tertiaryTone : undefined, row.type === 'identity' ? row.badges : undefined);
+  if (row.type === 'activity' && row.status) column.appendChild(createElement(context.document, 'span', 'ok-native-list-secondary', row.status));
+  if (row.type === 'activity' && row.footerActions?.length) {
+    const actions = createElement(context.document, 'span', 'ok-native-list-actions');
+    row.footerActions.forEach((action, slot) => {
+      const button = createElement(context.document, 'button', 'ok-native-list-action-button', action.label);
+      button.setAttribute('type', 'button');
+      button.toggleAttribute('disabled', Boolean(action.disabled));
+      setData(button, 'tone', action.tone);
+      setData(button, 'nativeListAction', action.key);
+      markActionAnchorSource(button, 'footerAction', slot);
+      actions.appendChild(button);
+    });
+    column.appendChild(actions);
+  }
+  body.appendChild(column);
+  if (row.type === 'activity') {
+    const amounts = createElement(context.document, 'span', 'ok-native-list-amounts');
+    if (row.primaryAmount) amounts.appendChild(createElement(context.document, 'span', 'ok-native-list-value', row.primaryAmount));
+    if (row.secondaryAmount) amounts.appendChild(createElement(context.document, 'span', 'ok-native-list-secondary', row.secondaryAmount));
+    body.appendChild(amounts);
+  } else if (row.type === 'message') {
+    body.appendChild(createElement(context.document, 'span', 'ok-native-list-time', row.time));
+    if (row.thumbnail) {
+      const thumbnail = createImage(context, row.thumbnail, 'ok-native-list-thumbnail');
+      if (thumbnail) body.appendChild(thumbnail);
+    }
+  } else {
+    appendAccessories(body, context, row.key, row.trailing);
+  }
+  return body;
+}
+function createWalletGroupRow(context, row) {
+  const body = createElement(context.document, 'div', 'ok-native-list-wallet-group');
+  [row.parent, ...row.children].forEach((member, memberIndex) => {
+    const memberElement = createElement(context.document, 'div', 'ok-native-list-wallet-member');
+    setData(memberElement, 'nativeListGroupMemberKey', member.key);
+    setData(memberElement, 'nativeListGroupParent', memberIndex === 0);
+    setData(memberElement, 'nativeListSelected', member.selected);
+    memberElement.appendChild(createIdentityActivityOrMessageRow(context, member));
+    body.appendChild(memberElement);
+  });
+  return body;
+}
+function createRowBody(context, row) {
+  switch (row.type) {
+    case 'walletGroup':
+      return createWalletGroupRow(context, row);
+    case 'sectionHeader':
+      return createSectionHeader(context, row);
+    case 'action':
+      return createActionRow(context, row);
+    case 'system':
+      return createSystemRow(context, row);
+    case 'rail':
+      return createRailRow(context, row);
+    case 'mediaTile':
+      return createMediaRow(context, row);
+    case 'metricCard':
+      return createMetricRow(context, row);
+    case 'dataRow':
+      return createDataRow(context, row);
+    case 'identity':
+    case 'activity':
+    case 'message':
+      return createIdentityActivityOrMessageRow(context, row);
+  }
+}
+export class NativeListWebEngine {
+  rows = [];
+  selectedKeys = new Set();
+  layout = {
+    items: [],
+    contentWidth: 0,
+    contentHeight: 0,
+    horizontal: false
+  };
+  mounted = new Map();
+  pool = [];
+  suppressClickUntil = 0;
+  pullDistance = 0;
+  actionAnchorInstanceId = String(++webNativeListInstanceCounter);
+  actionAnchorCounter = 0;
+  bindingEpochCounter = 0;
+  lastViewportWidth = -1;
+  lastViewportHeight = -1;
+  destroyed = false;
+  constructor(host, snapshot, callbacks, virtualizationEnabled = true) {
+    this.document = host.ownerDocument;
+    this.snapshot = validateSnapshot(snapshot);
+    this.callbacks = callbacks;
+    this.virtualizationEnabled = virtualizationEnabled;
+    this.previousHostPosition = host.style.position;
+    if (!host.style.position) host.style.position = 'relative';
+    this.root = createElement(this.document, 'div', 'ok-native-list-root');
+    const style = this.document.createElement('style');
+    style.textContent = WEB_LIST_CSS;
+    this.viewportFrame = createElement(this.document, 'div', 'ok-native-list-viewport-frame');
+    this.viewport = createElement(this.document, 'div', 'ok-native-list-viewport');
+    this.viewport.setAttribute('role', 'list');
+    this.content = createElement(this.document, 'div', 'ok-native-list-content');
+    this.footer = createElement(this.document, 'div', 'ok-native-list-footer');
+    this.sticky = createElement(this.document, 'div', 'ok-native-list-item ok-native-list-sticky');
+    this.sticky.setAttribute('aria-hidden', 'true');
+    this.sticky.hidden = true;
+    this.indexRail = createElement(this.document, 'div', 'ok-native-list-index-rail');
+    this.indexRail.setAttribute('role', 'navigation');
+    this.indexRail.setAttribute('aria-label', 'Section index');
+    this.indexRail.hidden = true;
+    this.indexPreview = createElement(this.document, 'div', 'ok-native-list-index-preview');
+    this.indexPreview.setAttribute('aria-live', 'polite');
+    this.refreshIndicator = createElement(this.document, 'div', 'ok-native-list-refresh', 'Refreshing');
+    this.refreshIndicator.setAttribute('role', 'status');
+    this.reorderPreview = createElement(this.document, 'div', 'ok-native-list-reorder-preview');
+    this.reorderPreview.hidden = true;
+    this.reorderPreview.setAttribute('aria-hidden', 'true');
+    this.document.body.appendChild(this.reorderPreview);
+    this.viewport.append(this.content);
+    this.viewportFrame.append(this.viewport, this.sticky, this.indexRail, this.indexPreview, this.refreshIndicator);
+    this.root.append(style, this.viewportFrame, this.footer);
+    host.appendChild(this.root);
+    this.viewport.addEventListener('scroll', this.handleScroll, {
+      passive: true
+    });
+    this.root.addEventListener('click', this.handleClick);
+    this.root.addEventListener('keydown', this.handleKeyDown);
+    this.viewport.addEventListener('pointerdown', this.handleReorderPointerDown, {
+      passive: false
+    });
+    this.viewport.addEventListener('pointermove', this.handleReorderPointerMove, {
+      passive: false
+    });
+    this.viewport.addEventListener('pointerup', this.handleReorderPointerEnd);
+    this.viewport.addEventListener('pointercancel', this.handleReorderPointerCancel);
+    this.viewport.addEventListener('touchmove', this.handleReorderTouchMove, {
+      passive: false
+    });
+    this.viewport.addEventListener('touchend', this.handleReorderTouchEnd, {
+      passive: false
+    });
+    this.viewport.addEventListener('touchcancel', this.handleReorderTouchCancel);
+    this.indexRail.addEventListener('pointerdown', this.handleIndexPointer);
+    this.indexRail.addEventListener('pointermove', this.handleIndexPointer);
+    this.indexRail.addEventListener('click', this.handleIndexClick);
+    this.viewport.addEventListener('pointerdown', this.handlePullStart, {
+      passive: true
+    });
+    this.viewport.addEventListener('pointermove', this.handlePullMove, {
+      passive: false
+    });
+    this.viewport.addEventListener('pointerup', this.handlePullEnd);
+    this.viewport.addEventListener('pointercancel', this.handlePullEnd);
+    const ResizeObserverConstructor = this.document.defaultView?.ResizeObserver;
+    if (ResizeObserverConstructor) {
+      this.resizeObserver = new ResizeObserverConstructor(() => this.recomputeLayout());
+      this.resizeObserver.observe(this.viewport);
+    } else {
+      this.document.defaultView?.addEventListener('resize', this.handleWindowResize);
+    }
+    this.applySnapshot(this.snapshot);
+  }
+  updateCallbacks(callbacks) {
+    this.callbacks = callbacks;
+  }
+  setVirtualizationEnabled(enabled) {
+    if (this.virtualizationEnabled === enabled) return;
+    this.virtualizationEnabled = enabled;
+    this.renderWindow();
+  }
+  applySnapshot(snapshot) {
+    const validated = validateSnapshot(snapshot);
+    this.invalidateActionAnchor('snapshot');
+    this.setSnapshot(validated);
+  }
+  applyPatches(patches) {
+    if (patches.length === 0) return;
+    const next = applyRowPatches(this.snapshot, patches);
+    this.invalidateActionAnchor('snapshot');
+    const selection = new Set(this.selectedKeys);
+    patches.forEach(patch => {
+      const selected = 'selected' in patch.changes ? patch.changes.selected : undefined;
+      if (selected === true) selection.add(patch.key);else if (selected === false) selection.delete(patch.key);
+    });
+    this.setSnapshot(next, selection);
+  }
+  reconcileSelection(keys) {
+    const selectable = new Set(this.snapshot.rows.filter(isSelectableRow).map(row => row.key));
+    if (keys.some(key => !selectable.has(key))) return;
+    if (this.snapshot.selection?.mode === 'single' && keys.length > 1) return;
+    this.selectedKeys = new Set(keys);
+    this.updateVisibleSelection();
+    this.renderFooter();
+  }
+  scrollToIndex(index, scroll) {
+    if (index < 0 || index >= this.rows.length) {
+      this.emitScrollFailure(index, 'index-out-of-range');
+      return;
+    }
+    if (!this.canScroll()) {
+      this.pendingScroll = {
+        kind: 'index',
+        index,
+        scroll
+      };
+      return;
+    }
+    const item = this.layout.items[index];
+    if (!item) {
+      this.pendingScroll = {
+        kind: 'index',
+        index,
+        scroll
+      };
+      return;
+    }
+    const viewportLength = this.viewportLength();
+    const contentLength = this.contentLength();
+    const currentOffset = this.currentOffset();
+    const offset = calculateAlignedScrollOffset({
+      itemOffset: itemStart(item, this.layout.horizontal),
+      itemLength: this.layout.horizontal ? item.width : item.height,
+      viewportLength,
+      contentLength,
+      currentOffset,
+      alignment: scroll.alignment,
+      viewPosition: scroll.viewPosition,
+      viewOffset: scroll.viewOffset
+    });
+    this.scrollToAbsoluteOffset(offset, scroll.animated);
+  }
+  scrollToKey(key, scroll) {
+    const index = this.rows.findIndex(row => row.key === key);
+    if (index >= 0) this.scrollToIndex(index, scroll);
+  }
+  scrollToOffset(offset, animated) {
+    validateOffset(offset);
+    if (!this.canScroll()) {
+      this.pendingScroll = {
+        kind: 'offset',
+        offset,
+        animated
+      };
+      return;
+    }
+    this.scrollToAbsoluteOffset(offset, animated);
+  }
+  scrollToEnd(animated) {
+    if (!this.canScroll()) {
+      this.pendingScroll = {
+        kind: 'end',
+        animated
+      };
+      return;
+    }
+    this.scrollToAbsoluteOffset(Math.max(0, this.contentLength() - this.viewportLength()), animated);
+  }
+  scrollToLocation(params, scroll) {
+    const index = resolveLocationIndex(this.snapshot.rows, params);
+    if (index === undefined) {
+      const sectionCount = this.snapshot.rows.filter(row => row.type === 'sectionHeader' && row.variant !== 'summary').length;
+      this.emitScrollFailure(params.itemIndex, params.sectionIndex >= sectionCount ? 'section-out-of-range' : 'item-out-of-range');
+      return;
+    }
+    this.scrollToIndex(index, scroll);
+  }
+  setRefreshing(refreshing) {
+    this.snapshot = {
+      ...this.snapshot,
+      capabilities: {
+        ...this.snapshot.capabilities,
+        refreshing
+      }
+    };
+    this.updateRefreshIndicator();
+  }
+  setActionAnchorState(state) {
+    const anchor = this.actionAnchor;
+    if (!anchor || anchor.token !== state.token) return;
+    if (!state.open) {
+      if (state.restoreFocus && this.isActionAnchorValid(anchor)) {
+        anchor.actionElement.focus({
+          preventScroll: true
+        });
+      }
+      anchor.actionElement.removeAttribute('aria-expanded');
+      this.actionAnchor = undefined;
+      return;
+    }
+    if (anchor.invalidatedReason || !this.isActionAnchorValid(anchor)) {
+      this.emitActionAnchorInvalidated(anchor, anchor.invalidatedReason ?? 'rebind');
+      return;
+    }
+    anchor.open = true;
+    anchor.actionElement.setAttribute('aria-expanded', 'true');
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.invalidateActionAnchor('destroy');
+    this.destroyed = true;
+    if (this.frameHandle !== undefined) this.cancelFrame(this.frameHandle);
+    if (this.previewTimer !== undefined) this.document.defaultView?.clearTimeout(this.previewTimer);
+    if (this.reorderMovementTimer !== undefined) this.document.defaultView?.clearTimeout(this.reorderMovementTimer);
+    this.resizeObserver?.disconnect();
+    this.document.defaultView?.removeEventListener('resize', this.handleWindowResize);
+    this.viewport.removeEventListener('scroll', this.handleScroll);
+    this.root.removeEventListener('click', this.handleClick);
+    this.root.removeEventListener('keydown', this.handleKeyDown);
+    this.cancelPointerReorder(true);
+    this.viewport.removeEventListener('pointerdown', this.handleReorderPointerDown);
+    this.viewport.removeEventListener('pointermove', this.handleReorderPointerMove);
+    this.viewport.removeEventListener('pointerup', this.handleReorderPointerEnd);
+    this.viewport.removeEventListener('pointercancel', this.handleReorderPointerCancel);
+    this.viewport.removeEventListener('touchmove', this.handleReorderTouchMove);
+    this.viewport.removeEventListener('touchend', this.handleReorderTouchEnd);
+    this.viewport.removeEventListener('touchcancel', this.handleReorderTouchCancel);
+    this.indexRail.removeEventListener('pointerdown', this.handleIndexPointer);
+    this.indexRail.removeEventListener('pointermove', this.handleIndexPointer);
+    this.indexRail.removeEventListener('click', this.handleIndexClick);
+    this.viewport.removeEventListener('pointerdown', this.handlePullStart);
+    this.viewport.removeEventListener('pointermove', this.handlePullMove);
+    this.viewport.removeEventListener('pointerup', this.handlePullEnd);
+    this.viewport.removeEventListener('pointercancel', this.handlePullEnd);
+    const host = this.root.parentElement;
+    this.root.remove();
+    this.hideReorderPreview();
+    this.reorderPreview.remove();
+    if (host) host.style.position = this.previousHostPosition;
+    this.mounted.clear();
+    this.pool.length = 0;
+  }
+  setSnapshot(snapshot, selectedKeys) {
+    this.snapshot = snapshot;
+    this.rows = effectiveRows(snapshot);
+    this.selectedKeys = selectedKeys ?? selectionStateFromSnapshot(snapshot).selectedKeys;
+    if (this.reachedGeneration !== snapshot.generation) this.reachedGeneration = undefined;
+    this.renderSectionIndex();
+    this.applyTheme();
+    this.recomputeLayout();
+    this.renderFooter();
+    this.updateRefreshIndicator();
+  }
+  applyTheme() {
+    const theme = resolvedTheme(this.snapshot);
+    const values = {
+      '--nl-bg': theme.background,
+      '--nl-row': theme.rowBackground,
+      '--nl-selected': theme.rowSelectedBackground,
+      '--nl-pressed': theme.rowPressedBackground,
+      '--nl-subdued': theme.subduedBackground,
+      '--nl-strong': theme.strongBackground,
+      '--nl-primary': theme.primaryText,
+      '--nl-secondary': theme.secondaryText,
+      '--nl-disabled': theme.disabledText,
+      '--nl-icon': theme.icon,
+      '--nl-icon-subdued': theme.iconSubdued,
+      '--nl-separator': theme.separator,
+      '--nl-accent': theme.accent,
+      '--nl-positive': theme.positive,
+      '--nl-negative': theme.negative,
+      '--nl-critical': theme.criticalBackground,
+      '--nl-inverse': theme.inverseBackground,
+      '--nl-inverse-text': theme.inverseText,
+      '--nl-info': theme.info
+    };
+    Object.entries(values).forEach(([name, value]) => {
+      if (!value) return;
+      this.root.style.setProperty(name, value);
+      this.reorderPreview.style.setProperty(name, value);
+    });
+  }
+  recomputeLayout = () => {
+    if (this.destroyed) return;
+    const viewportWidth = this.viewport.clientWidth;
+    const viewportHeight = this.viewport.clientHeight;
+    if (this.lastViewportWidth >= 0 && (viewportWidth !== this.lastViewportWidth || viewportHeight !== this.lastViewportHeight)) {
+      this.invalidateActionAnchor('layout');
+    }
+    this.lastViewportWidth = viewportWidth;
+    this.lastViewportHeight = viewportHeight;
+    const previousHorizontal = this.layout.horizontal;
+    this.layout = computeWebListLayout(this.snapshot, viewportWidth, viewportHeight, this.reorderCompactKey);
+    this.content.style.width = String(this.layout.contentWidth) + 'px';
+    this.content.style.height = String(this.layout.contentHeight) + 'px';
+    if (previousHorizontal !== this.layout.horizontal) {
+      this.viewport.scrollLeft = 0;
+      this.viewport.scrollTop = 0;
+    }
+    this.renderWindow();
+    this.performPendingScroll();
+  };
+  renderWindow() {
+    const viewportLength = this.viewportLength();
+    const visible = webLayoutItemsForMount(this.layout, this.currentOffset(), viewportLength, this.virtualizationEnabled, viewportLength * OVERSCAN_VIEWPORTS);
+    const desired = new Set(visible.map(item => item.index));
+    this.mounted.forEach((element, index) => {
+      if (!desired.has(index)) {
+        this.invalidateActionAnchorForElement(element);
+        this.mounted.delete(index);
+        element.remove();
+        this.pool.push(element);
+      }
+    });
+    visible.forEach(layoutItem => {
+      const row = this.rows[layoutItem.index];
+      if (!row) return;
+      let element = this.mounted.get(layoutItem.index);
+      if (!element) {
+        element = this.pool.pop() ?? createElement(this.document, 'div', 'ok-native-list-item');
+        setData(element, 'nativeListAnimateReorder', false);
+        this.mounted.set(layoutItem.index, element);
+        this.content.appendChild(element);
+      }
+      this.positionElement(element, layoutItem);
+      const signature = webRowRenderSignature(row);
+      if (element.dataset.nativeListRowKey !== row.key || element.dataset.renderSignature !== signature) {
+        this.renderElement(element, layoutItem.index, row);
+        element.dataset.renderSignature = signature;
+      }
+    });
+    this.updateVisibleSelection();
+    this.updateVisibleState();
+  }
+  positionElement(element, item) {
+    element.style.transform = 'translate3d(' + String(item.x) + 'px,' + String(item.y) + 'px,0)';
+    element.style.width = String(item.width) + 'px';
+    element.style.height = String(item.height) + 'px';
+  }
+  renderElement(element, index, row, overlay = false) {
+    this.invalidateActionAnchorForElement(element);
+    const bindingEpoch = String(++this.bindingEpochCounter);
+    element.className = overlay ? 'ok-native-list-item ok-native-list-sticky' : 'ok-native-list-item';
+    setData(element, 'nativeListRowKey', row.key);
+    setData(element, 'nativeListBindingEpoch', bindingEpoch);
+    setData(element, 'nativeListRowIndex', index);
+    setData(element, 'nativeListDisabled', Boolean(row.disabled));
+    setData(element, 'nativeListReorderable', this.isReorderable(row));
+    setData(element, 'nativeListDragging', this.pointerReorder?.active && this.pointerReorder.sourceKey === row.key);
+    setData(element, 'separator', row.separator);
+    setData(element, 'groupPosition', row.groupPosition);
+    setData(element, 'tableAlternate', this.snapshot.layout.kind === 'table' && row.type === 'dataRow' && (row.index ?? index) % 2 === 0);
+    element.setAttribute('role', 'listitem');
+    element.setAttribute('aria-label', row.accessibilityLabel ?? this.rowLabel(row));
+    if (!row.disabled && !(row.type === 'system' && row.variant === 'spacer')) {
+      element.tabIndex = 0;
+    } else {
+      element.removeAttribute('tabindex');
+    }
+    element.draggable = false;
+    const context = {
+      document: this.document,
+      snapshot: this.snapshot,
+      selectedKeys: this.selectedKeys,
+      itemIndex: index
+    };
+    element.replaceChildren(createRowBody(context, row));
+  }
+  renderFooter() {
+    const row = this.snapshot.fixedFooter;
+    this.invalidateActionAnchorForElement(this.footer);
+    this.footer.replaceChildren();
+    if (!row) return;
+    const element = createElement(this.document, 'div', 'ok-native-list-item');
+    this.renderElement(element, -1, row);
+    element.style.position = 'relative';
+    element.style.transform = 'none';
+    element.style.width = '100%';
+    element.style.height = String(estimateWebRowHeight(row, this.snapshot, this.viewport.clientWidth || DEFAULT_VIEWPORT_WIDTH)) + 'px';
+    this.footer.appendChild(element);
+  }
+  renderSectionIndex() {
+    this.indexRail.replaceChildren();
+    if (!sectionIndexEnabled(this.snapshot)) {
+      this.indexRail.hidden = true;
+      return;
+    }
+    const fragment = this.document.createDocumentFragment();
+    this.snapshot.rows.forEach((row, index) => {
+      if (row.type !== 'sectionHeader' || !row.indexTitle) return;
+      const button = createElement(this.document, 'button', 'ok-native-list-index-button', row.indexTitle);
+      button.setAttribute('type', 'button');
+      button.setAttribute('aria-label', 'Jump to ' + row.indexTitle);
+      setData(button, 'sectionPosition', index);
+      setData(button, 'sectionKey', row.key);
+      fragment.appendChild(button);
+    });
+    this.indexRail.appendChild(fragment);
+    this.indexRail.hidden = this.indexRail.childElementCount === 0;
+  }
+  updateVisibleSelection() {
+    const update = (element, row) => {
+      if (!row) return;
+      const selected = this.selectedKeys.has(row.key);
+      setData(element, 'nativeListSelected', selected);
+      element.setAttribute('aria-selected', String(selected));
+      element.querySelectorAll('.ok-native-list-checkbox').forEach(checkbox => {
+        const scope = checkbox.dataset.selectionScope;
+        const key = checkbox.dataset.selectionKey;
+        const target = scope === 'section' && key ? {
+          scope: 'section',
+          sectionKey: key
+        } : scope === 'list' ? {
+          scope: 'list'
+        } : {
+          scope: 'row'
+        };
+        const state = checkboxState(target, checkbox.dataset.checkboxFallback ?? 'unchecked', row.key, this.snapshot, this.selectedKeys);
+        setData(checkbox, 'state', state);
+        checkbox.setAttribute('aria-checked', state === 'indeterminate' ? 'mixed' : String(state === 'checked'));
+      });
+    };
+    this.mounted.forEach((element, index) => update(element, this.rows[index]));
+    const stickyIndex = Number(this.sticky.dataset.nativeListRowIndex);
+    if (!Number.isNaN(stickyIndex)) update(this.sticky, this.rows[stickyIndex]);
+  }
+  updateVisibleState() {
+    const visible = visibleWebLayoutItems(this.layout, this.currentOffset(), this.viewportLength());
+    const first = visible[0];
+    const last = visible.at(-1);
+    const signature = String(first?.index ?? -1) + ':' + String(last?.index ?? -1) + ':' + (first?.key ?? '') + ':' + (last?.key ?? '');
+    if (signature !== this.lastVisibleSignature) {
+      this.lastVisibleSignature = signature;
+      this.callbacks.onVisibleRangeChanged?.({
+        firstKey: first?.key,
+        lastKey: last?.key,
+        firstIndex: first?.index ?? -1,
+        lastIndex: last?.index ?? -1
+      });
+    }
+    this.checkEndReached(last?.index ?? -1);
+    this.updateStickyHeader(first?.index ?? -1);
+    this.updateSectionIndex(first?.index ?? -1);
+  }
+  updateStickyHeader(firstVisibleIndex) {
+    if (!this.snapshot.layout.stickyHeaders || this.layout.horizontal || firstVisibleIndex < 0) {
+      this.sticky.hidden = true;
+      this.stickyKey = undefined;
+      return;
+    }
+    let index = -1;
+    for (let cursor = firstVisibleIndex; cursor >= 0; cursor -= 1) {
+      const row = this.rows[cursor];
+      if (row?.type === 'sectionHeader' && row.variant !== 'summary') {
+        index = cursor;
+        break;
+      }
+    }
+    const row = this.rows[index];
+    const item = this.layout.items[index];
+    if (!row || row.type !== 'sectionHeader' || !item) {
+      this.sticky.hidden = true;
+      this.stickyKey = undefined;
+      return;
+    }
+    const signature = webRowRenderSignature(row);
+    if (this.stickyKey !== row.key || this.sticky.dataset.renderSignature !== signature) {
+      this.renderElement(this.sticky, index, row, true);
+      this.sticky.dataset.renderSignature = signature;
+      this.stickyKey = row.key;
+    }
+    this.sticky.hidden = false;
+    this.sticky.style.left = String(item.x) + 'px';
+    this.sticky.style.right = 'auto';
+    this.sticky.style.width = String(item.width) + 'px';
+    this.sticky.style.height = String(item.height) + 'px';
+    let nextIndex = -1;
+    for (let cursor = index + 1; cursor < this.rows.length; cursor += 1) {
+      const candidate = this.rows[cursor];
+      if (candidate?.type === 'sectionHeader' && candidate.variant !== 'summary') {
+        nextIndex = cursor;
+        break;
+      }
+    }
+    const next = this.layout.items[nextIndex];
+    const translate = next ? Math.min(0, next.y - this.viewport.scrollTop - item.height) : 0;
+    this.sticky.style.transform = 'translate3d(0,' + String(translate) + 'px,0)';
+    this.updateVisibleSelection();
+  }
+  updateSectionIndex(firstVisibleIndex) {
+    let activeKey;
+    this.snapshot.rows.forEach((row, index) => {
+      if (index <= firstVisibleIndex && row.type === 'sectionHeader' && row.indexTitle) activeKey = row.key;
+    });
+    this.indexRail.querySelectorAll('[data-section-key]').forEach(button => setData(button, 'active', button.dataset.sectionKey === activeKey));
+  }
+  checkEndReached(lastVisibleIndex) {
+    if (!this.snapshot.capabilities?.loadMore || this.reachedGeneration === this.snapshot.generation || this.rows.length === 0) return;
+    const threshold = Math.max(1, Math.ceil(this.rows.length * (this.snapshot.capabilities.endReachedThreshold ?? 0.2)));
+    if (lastVisibleIndex < this.rows.length - threshold) return;
+    this.reachedGeneration = this.snapshot.generation;
+    this.callbacks.onEndReached?.({
+      generation: this.snapshot.generation,
+      lastKey: this.rows.at(-1)?.key
+    });
+  }
+  emitScrollFailure(index, reason) {
+    const average = this.layout.items.length === 0 ? 0 : this.layout.items.reduce((sum, item) => sum + (this.layout.horizontal ? item.width : item.height), 0) / this.layout.items.length;
+    this.callbacks.onScrollToIndexFailed?.(scrollFailure(this.rows, index, reason, average));
+  }
+  canScroll() {
+    const viewportLength = this.layout.horizontal ? this.viewport.clientWidth : this.viewport.clientHeight;
+    return viewportLength > 0 && this.layout.items.length > 0;
+  }
+  viewportLength() {
+    return this.layout.horizontal ? this.viewport.clientWidth || DEFAULT_VIEWPORT_WIDTH : this.viewport.clientHeight || DEFAULT_VIEWPORT_HEIGHT;
+  }
+  contentLength() {
+    return this.layout.horizontal ? this.layout.contentWidth : this.layout.contentHeight;
+  }
+  currentOffset() {
+    return this.layout.horizontal ? this.viewport.scrollLeft : this.viewport.scrollTop;
+  }
+  scrollToAbsoluteOffset(offset, animated) {
+    const resolved = Math.min(Math.max(0, offset), Math.max(0, this.contentLength() - this.viewportLength()));
+    this.viewport.scrollTo(this.layout.horizontal ? {
+      left: resolved,
+      top: 0,
+      behavior: animated ? 'smooth' : 'auto'
+    } : {
+      left: 0,
+      top: resolved,
+      behavior: animated ? 'smooth' : 'auto'
+    });
+    this.scheduleFrame();
+  }
+  performPendingScroll() {
+    const pending = this.pendingScroll;
+    if (!pending || !this.canScroll()) return;
+    this.pendingScroll = undefined;
+    if (pending.kind === 'index') this.scrollToIndex(pending.index, pending.scroll);else if (pending.kind === 'offset') this.scrollToOffset(pending.offset, pending.animated);else this.scrollToEnd(pending.animated);
+  }
+  rowAtElement(element) {
+    if (!element) return undefined;
+    const key = element.dataset.nativeListRowKey;
+    return this.rows.find(row => row.key === key) ?? (this.snapshot.fixedFooter?.key === key ? this.snapshot.fixedFooter : undefined);
+  }
+  rowLabel(row) {
+    if (row.type === 'walletGroup') return row.parent.title;
+    if ('title' in row) return row.title;
+    if ('message' in row && row.message) return row.message;
+    return row.type;
+  }
+  isReorderable(row) {
+    return isWebRowReorderable(this.snapshot, row);
+  }
+  activateSelection(target, sourceRow) {
+    const action = target.scope === 'row' ? {
+      scope: 'row',
+      key: sourceRow.key
+    } : target;
+    const result = reduceSelection({
+      mode: this.snapshot.selection?.mode ?? 'none',
+      selectedKeys: this.selectedKeys
+    }, action, this.snapshot.rows);
+    if (result.delta.addedKeys.length === 0 && result.delta.removedKeys.length === 0) return;
+    this.selectedKeys = result.state.selectedKeys;
+    this.updateVisibleSelection();
+    this.renderFooter();
+    this.callbacks.onSelectionDelta?.(result.delta);
+  }
+  emitRowAction(row, actionKey, actionElement, rowElement) {
+    const anchor = actionElement && rowElement ? this.createActionAnchor(actionElement, rowElement) : undefined;
+    this.callbacks.onRowAction?.({
+      rowKey: row.key,
+      actionKey,
+      sectionKey: row.sectionKey,
+      anchor
+    });
+  }
+  createActionAnchor(actionElement, rowElement, sourceOverride) {
+    const source = sourceOverride ?? actionElement.dataset.nativeListAnchorSource;
+    const bindingEpoch = rowElement.dataset.nativeListBindingEpoch;
+    if (!source || !bindingEpoch || !rowElement.contains(actionElement)) return undefined;
+    this.invalidateActionAnchor('rebind');
+    const rect = actionElement.getBoundingClientRect();
+    const token = [this.actionAnchorInstanceId, this.snapshot.generation, ++this.actionAnchorCounter, bindingEpoch].join(':');
+    const slotValue = actionElement.dataset.nativeListAnchorSlot;
+    const direction = this.document.defaultView?.getComputedStyle(actionElement).direction === 'rtl' || actionElement.closest('[dir="rtl"]') ? 'rtl' : 'ltr';
+    this.actionAnchor = {
+      token,
+      actionElement,
+      rowElement,
+      bindingEpoch,
+      open: false
+    };
+    return webActionAnchorPayload(token, rect, source, this.snapshot.generation, direction, slotValue === undefined ? undefined : Number(slotValue));
+  }
+  isActionAnchorValid(anchor) {
+    return anchor.actionElement.isConnected && anchor.rowElement.isConnected && anchor.rowElement.contains(anchor.actionElement) && anchor.rowElement.dataset.nativeListBindingEpoch === anchor.bindingEpoch;
+  }
+  invalidateActionAnchorForElement(element) {
+    const anchor = this.actionAnchor;
+    if (anchor && (element === anchor.rowElement || element.contains(anchor.actionElement))) {
+      this.invalidateActionAnchor('rebind');
+    }
+  }
+  invalidateActionAnchor(reason) {
+    const anchor = this.actionAnchor;
+    if (!anchor || anchor.invalidatedReason) return;
+    anchor.invalidatedReason = reason;
+    anchor.actionElement.removeAttribute('aria-expanded');
+    if (anchor.open) this.emitActionAnchorInvalidated(anchor, reason);
+  }
+  emitActionAnchorInvalidated(anchor, reason) {
+    if (this.actionAnchor !== anchor) return;
+    this.actionAnchor = undefined;
+    this.callbacks.onActionAnchorInvalidated?.({
+      token: anchor.token,
+      reason
+    });
+  }
+  handleRowPress(row, rowElement, sourceElement = rowElement) {
+    if (row.disabled) return;
+    if (this.snapshot.selection?.rowPressToggles && this.snapshot.selection.mode !== 'none' && isSelectableRow(row)) {
+      this.activateSelection({
+        scope: 'row'
+      }, row);
+      return;
+    }
+    const actionKey = row.type === 'action' ? row.actionKey : row.type === 'system' && row.variant === 'retry' ? row.actionKey : 'press';
+    if (rowElement && sourceElement) {
+      const anchor = this.createActionAnchor(sourceElement, rowElement, 'row');
+      this.callbacks.onRowAction?.({
+        rowKey: row.key,
+        actionKey,
+        sectionKey: row.sectionKey,
+        anchor
+      });
+    } else {
+      this.emitRowAction(row, actionKey);
+    }
+  }
+  handleClick = event => {
+    if (Date.now() < this.suppressClickUntil) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const rowElement = target.closest('[data-native-list-row-key]');
+    const row = this.rowAtElement(rowElement);
+    if (!row || row.disabled) return;
+    const memberElement = target.closest('[data-native-list-group-member-key]');
+    const memberKey = memberElement?.dataset.nativeListGroupMemberKey;
+    const sourceRow = row.type === 'walletGroup' && memberKey ? [row.parent, ...row.children].find(member => member.key === memberKey) ?? row : row;
+    const action = target.closest('[data-native-list-action]');
+    if (action) {
+      const scope = action.dataset.selectionScope;
+      if (scope === 'row') this.activateSelection({
+        scope: 'row'
+      }, row);else if (scope === 'section' && action.dataset.selectionKey) this.activateSelection({
+        scope: 'section',
+        sectionKey: action.dataset.selectionKey
+      }, row);else if (scope === 'list') this.activateSelection({
+        scope: 'list'
+      }, row);else if (action.dataset.nativeListAction) this.emitRowAction(sourceRow, action.dataset.nativeListAction, action, rowElement ?? undefined);
+      return;
+    }
+    this.handleRowPress(sourceRow, rowElement ?? undefined, memberElement ?? rowElement ?? undefined);
+  };
+  handleKeyDown = event => {
+    if (event.key === 'Escape') {
+      if (this.pointerReorder?.active) {
+        event.preventDefault();
+        this.cancelPointerReorder(true);
+        return;
+      }
+      if (this.keyboardReorder) {
+        event.preventDefault();
+        this.cancelKeyboardReorder();
+        return;
+      }
+    }
+    if (this.keyboardReorder && (event.key === 'ArrowUp' || event.key === 'ArrowLeft')) {
+      event.preventDefault();
+      this.moveKeyboardReorder(-1);
+      return;
+    }
+    if (this.keyboardReorder && (event.key === 'ArrowDown' || event.key === 'ArrowRight')) {
+      event.preventDefault();
+      this.moveKeyboardReorder(1);
+      return;
+    }
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) return;
+    if (target.matches('button')) return;
+    const row = this.rowAtElement(target.closest('[data-native-list-row-key]'));
+    if (!row) return;
+    event.preventDefault();
+    if (event.key === ' ' && this.isReorderable(row)) {
+      if (this.keyboardReorder) this.finishKeyboardReorder();else this.startKeyboardReorder(row);
+      return;
+    }
+    this.handleRowPress(row, target.closest('[data-native-list-row-key]') ?? undefined);
+  };
+  startKeyboardReorder(row) {
+    this.keyboardReorder = {
+      sourceKey: row.key,
+      originalRows: this.snapshot.rows
+    };
+    this.updateReorderVisualState();
+  }
+  moveKeyboardReorder(delta) {
+    const state = this.keyboardReorder;
+    if (!state) return;
+    const fromIndex = this.snapshot.rows.findIndex(row => row.key === state.sourceKey);
+    const toIndex = fromIndex + delta;
+    const from = this.snapshot.rows[fromIndex];
+    const to = this.snapshot.rows[toIndex];
+    if (!from || !to || !this.isReorderable(to) || from.sectionKey !== to.sectionKey) return;
+    const rows = moveWebReorderRow(this.snapshot.rows, fromIndex, toIndex);
+    this.remapMountedRows(rows);
+    this.setSnapshot({
+      ...this.snapshot,
+      rows
+    }, this.selectedKeys);
+    this.updateReorderVisualState();
+    this.scrollToIndex(toIndex, {
+      animated: false,
+      alignment: 'nearest',
+      viewPosition: 0,
+      viewOffset: 0
+    });
+    [...this.mounted.values()].find(element => element.dataset.nativeListRowKey === state.sourceKey)?.focus({
+      preventScroll: true
+    });
+  }
+  finishKeyboardReorder() {
+    const state = this.keyboardReorder;
+    if (!state) return;
+    const reorderEvent = webReorderEventForRows(state.originalRows, this.snapshot.rows, state.sourceKey);
+    this.keyboardReorder = undefined;
+    this.updateReorderVisualState();
+    if (reorderEvent) this.callbacks.onReorder?.(reorderEvent);
+  }
+  cancelKeyboardReorder() {
+    const state = this.keyboardReorder;
+    if (!state) return;
+    this.keyboardReorder = undefined;
+    this.remapMountedRows(state.originalRows);
+    this.setSnapshot({
+      ...this.snapshot,
+      rows: cancelWebReorderRows(state.originalRows)
+    }, this.selectedKeys);
+    this.updateReorderVisualState();
+    [...this.mounted.values()].find(element => element.dataset.nativeListRowKey === state.sourceKey)?.focus({
+      preventScroll: true
+    });
+  }
+  handleScroll = () => {
+    this.invalidateActionAnchor('scroll');
+    this.scheduleFrame();
+  };
+  handleWindowResize = () => {
+    const state = this.pointerReorder;
+    if (state?.active) state.viewportRect = this.reorderViewportRect();
+    this.recomputeLayout();
+  };
+  scheduleFrame() {
+    if (this.frameHandle !== undefined || this.destroyed) return;
+    this.frameHandle = this.requestFrame(() => {
+      this.frameHandle = undefined;
+      if (this.virtualizationEnabled) this.renderWindow();else this.updateVisibleState();
+    });
+  }
+  requestFrame(callback) {
+    const view = this.document.defaultView;
+    return view?.requestAnimationFrame ? view.requestAnimationFrame(callback) : view?.setTimeout(() => callback(Date.now()), 16) ?? 0;
+  }
+  cancelFrame(handle) {
+    const view = this.document.defaultView;
+    if (view?.cancelAnimationFrame) view.cancelAnimationFrame(handle);else view?.clearTimeout(handle);
+  }
+  selectIndexPosition(position, title) {
+    this.scrollToIndex(position, {
+      animated: false,
+      alignment: 'start',
+      viewPosition: 0,
+      viewOffset: 0
+    });
+    this.indexPreview.textContent = title;
+    setData(this.indexPreview, 'visible', true);
+    if (this.previewTimer !== undefined) this.document.defaultView?.clearTimeout(this.previewTimer);
+    this.previewTimer = this.document.defaultView?.setTimeout(() => {
+      setData(this.indexPreview, 'visible', false);
+    }, 180);
+  }
+  indexButtonAtEvent(event) {
+    const direct = event.target?.closest('[data-section-position]');
+    if (direct) return direct;
+    return this.document.elementFromPoint(event.clientX, event.clientY)?.closest('[data-section-position]') ?? undefined;
+  }
+  handleIndexPointer = event => {
+    if (event.type === 'pointermove' && event.buttons === 0) return;
+    const button = this.indexButtonAtEvent(event);
+    if (!button) return;
+    event.preventDefault();
+    this.selectIndexPosition(Number(button.dataset.sectionPosition), button.textContent ?? '');
+  };
+  handleIndexClick = event => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const button = target.closest('[data-section-position]');
+    if (!button) return;
+    this.selectIndexPosition(Number(button.dataset.sectionPosition), button.textContent ?? '');
+  };
+  handlePullStart = event => {
+    if (this.pointerReorder?.pointerId === event.pointerId || !this.snapshot.capabilities?.pullToRefresh || this.viewport.scrollTop > 0 || event.pointerType !== 'touch' && event.pointerType !== 'pen') return;
+    this.pullStartY = event.clientY;
+    this.pullDistance = 0;
+  };
+  handlePullMove = event => {
+    if (this.pullStartY === undefined) return;
+    this.pullDistance = Math.max(0, Math.min(96, event.clientY - this.pullStartY));
+    if (this.pullDistance <= 0) return;
+    event.preventDefault();
+    this.refreshIndicator.textContent = this.pullDistance >= 64 ? 'Release to refresh' : 'Pull to refresh';
+    setData(this.refreshIndicator, 'visible', true);
+    this.refreshIndicator.style.transform = 'translate(-50%,' + String(Math.min(32, this.pullDistance / 2)) + 'px)';
+  };
+  handlePullEnd = () => {
+    if (this.pullStartY === undefined) return;
+    const shouldRefresh = this.pullDistance >= 64;
+    this.pullStartY = undefined;
+    this.pullDistance = 0;
+    this.refreshIndicator.style.removeProperty('transform');
+    this.updateRefreshIndicator();
+    if (!shouldRefresh) return;
+    this.callbacks.onRefresh?.();
+    this.callbacks.onRowAction?.({
+      actionKey: 'nativeList.refresh'
+    });
+  };
+  updateRefreshIndicator() {
+    const refreshing = Boolean(this.snapshot.capabilities?.refreshing);
+    this.refreshIndicator.textContent = refreshing ? 'Refreshing' : '';
+    setData(this.refreshIndicator, 'visible', refreshing);
+  }
+  handleReorderPointerDown = event => {
+    if (this.pointerReorder || this.keyboardReorder || event.isPrimary === false || event.pointerType === 'mouse' && event.button !== 0) {
+      return;
+    }
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    if (target.closest('button,input,textarea,select,a')) return;
+    const rowElement = target.closest('[data-native-list-row-index]');
+    const index = Number(rowElement?.dataset.nativeListRowIndex);
+    const row = this.rows[index];
+    if (!row || !this.isReorderable(row)) return;
+    if (row.type === 'walletGroup' && target.closest('[data-native-list-group-parent]')?.dataset.nativeListGroupParent !== 'true') return;
+    const view = this.document.defaultView;
+    const state = {
+      pointerId: event.pointerId,
+      pointerType: event.pointerType || 'mouse',
+      sourceKey: row.key,
+      currentIndex: index,
+      startX: event.clientX,
+      startY: event.clientY,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      originalRows: this.snapshot.rows,
+      workingRows: [...this.snapshot.rows],
+      active: false
+    };
+    this.pointerReorder = state;
+    if (state.pointerType === 'mouse') {
+      this.captureReorderPointer(state);
+    } else {
+      state.longPressTimer = view?.setTimeout(() => this.activatePointerReorder(state), REORDER_TOUCH_LONG_PRESS_MS);
+    }
+  };
+  activatePointerReorder(state) {
+    if (this.pointerReorder !== state) return;
+    this.clearReorderLongPress(state);
+    state.active = true;
+    state.activatedAt = Date.now();
+    state.viewportRect = this.reorderViewportRect();
+    this.captureReorderPointer(state);
+    this.showReorderPreview(state);
+    if (state.workingRows[state.currentIndex]?.type === 'walletGroup' && this.reorderCompactKey !== state.sourceKey) {
+      this.reorderCompactKey = state.sourceKey;
+      this.mounted.forEach(element => setData(element, 'nativeListAnimateReorder', true));
+      this.recomputeLayout();
+    }
+    this.updateReorderVisualState();
+    this.scheduleReorderAutoScroll();
+  }
+  captureReorderPointer(state) {
+    try {
+      this.viewport.setPointerCapture?.(state.pointerId);
+    } catch {
+      // A canceled pointer can disappear before the long-press timer fires.
+    }
+  }
+  releaseReorderPointer(state) {
+    try {
+      if (this.viewport.hasPointerCapture?.(state.pointerId)) this.viewport.releasePointerCapture?.(state.pointerId);
+    } catch {
+      // The browser may have released capture while dispatching pointercancel.
+    }
+  }
+  clearReorderLongPress(state) {
+    if (state.longPressTimer === undefined) return;
+    this.document.defaultView?.clearTimeout(state.longPressTimer);
+    state.longPressTimer = undefined;
+  }
+  handleReorderPointerMove = event => {
+    const state = this.pointerReorder;
+    if (!state || state.pointerId !== event.pointerId) return;
+    state.clientX = event.clientX;
+    state.clientY = event.clientY;
+    if (!state.active) {
+      if (state.pointerType !== 'mouse') {
+        this.cancelPointerReorder(false);
+        return;
+      }
+      if (!hasExceededWebReorderMouseThreshold(event.clientX - state.startX, event.clientY - state.startY)) return;
+      this.activatePointerReorder(state);
+      if (!state.active) return;
+      event.preventDefault();
+      this.scheduleReorderMove();
+      this.scheduleReorderAutoScroll();
+      return;
+    }
+    event.preventDefault();
+    this.scheduleReorderMove();
+    this.scheduleReorderAutoScroll();
+  };
+  handleReorderTouchMove = event => {
+    const state = this.pointerReorder;
+    if (!state?.active || state.pointerType === 'mouse') return;
+    const touch = event.touches[0];
+    if (!touch) return;
+    event.preventDefault();
+    state.clientX = touch.clientX;
+    state.clientY = touch.clientY;
+    this.scheduleReorderMove();
+    this.scheduleReorderAutoScroll();
+  };
+  handleReorderTouchEnd = event => {
+    const state = this.pointerReorder;
+    if (!state?.active || state.pointerType === 'mouse') return;
+    event.preventDefault();
+    this.completePointerReorder(state);
+  };
+  handleReorderTouchCancel = () => {
+    const state = this.pointerReorder;
+    if (!state?.active || state.pointerType === 'mouse') return;
+    this.cancelPointerReorder(true);
+  };
+  setCurrentOffset(offset) {
+    const maximum = Math.max(0, this.contentLength() - this.viewportLength());
+    const next = Math.max(0, Math.min(maximum, offset));
+    if (this.layout.horizontal) this.viewport.scrollLeft = next;else this.viewport.scrollTop = next;
+    this.scheduleFrame();
+  }
+  showReorderPreview(state) {
+    this.hideReorderPreview();
+    const source = [...this.mounted.values()].find(element => element.dataset.nativeListRowKey === state.sourceKey);
+    const row = source?.firstElementChild;
+    if (!source || !row) return;
+    const rect = source.getBoundingClientRect();
+    const groupParent = row.querySelector('[data-native-list-group-parent="true"]>.ok-native-list-wallet-row');
+    const previewRow = groupParent ?? row;
+    const previewHeight = groupParent ? 68 : rect.height;
+    state.previewOffsetX = state.startX - rect.left;
+    state.previewOffsetY = Math.min(previewHeight, Math.max(0, state.startY - rect.top));
+    this.reorderPreview.replaceChildren(previewRow.cloneNode(true));
+    const sourceRow = state.workingRows[state.currentIndex];
+    const badgeText = sourceRow ? webWalletGroupReorderBadge(sourceRow) : undefined;
+    if (badgeText) {
+      this.reorderPreview.appendChild(createElement(this.document, 'span', 'ok-native-list-reorder-count', badgeText));
+    }
+    setData(this.reorderPreview, 'nativeListSelected', source.dataset.nativeListSelected === 'true');
+    this.reorderPreview.style.width = String(rect.width) + 'px';
+    this.reorderPreview.style.height = String(previewHeight) + 'px';
+    this.reorderPreview.style.transition = 'none';
+    this.reorderPreview.hidden = false;
+    this.updateReorderPreview(state);
+  }
+  animateReorderPreviewToCurrent(state) {
+    const destination = [...this.mounted.values()].find(element => element.dataset.nativeListRowKey === state.sourceKey);
+    const destinationIndex = this.rows.findIndex(row => row.key === state.sourceKey);
+    const destinationLayout = this.layout.items.find(item => item.index === destinationIndex);
+    if (this.reorderPreview.hidden || !destination || !destinationLayout) {
+      this.hideReorderPreview();
+      return;
+    }
+    this.reorderSettlingKey = state.sourceKey;
+    const viewportRect = this.viewport.getBoundingClientRect();
+    const left = viewportRect.left + destinationLayout.x - this.viewport.scrollLeft;
+    const top = viewportRect.top + destinationLayout.y - this.viewport.scrollTop;
+    this.reorderPreview.getBoundingClientRect();
+    this.reorderPreview.style.transition = 'transform ' + String(REORDER_DROP_TRANSITION_MS) + 'ms ' + WEB_REORDER_ANIMATION.dropTimingFunction + ', box-shadow ' + String(REORDER_DROP_TRANSITION_MS) + 'ms ' + WEB_REORDER_ANIMATION.dropTimingFunction;
+    this.reorderPreview.style.boxShadow = 'none';
+    this.reorderPreview.style.transform = 'translate3d(' + String(left) + 'px,' + String(top) + 'px,0) scale(1)';
+    this.reorderDropTimer = this.document.defaultView?.setTimeout(() => {
+      this.reorderDropTimer = undefined;
+      this.finishReorderDrop();
+    }, REORDER_DROP_TRANSITION_MS);
+  }
+  clearReorderPreviewVisual() {
+    this.reorderPreview.hidden = true;
+    this.reorderPreview.replaceChildren();
+    this.reorderPreview.style.removeProperty('transform');
+    this.reorderPreview.style.removeProperty('transition');
+    this.reorderPreview.style.removeProperty('box-shadow');
+    this.reorderPreview.removeAttribute('data-native-list-selected');
+  }
+  finishReorderDrop() {
+    this.clearReorderPreviewVisual();
+    this.reorderSettlingKey = undefined;
+    if (this.reorderCompactKey) {
+      this.reorderExpandingKey = this.reorderCompactKey;
+      this.reorderCompactKey = undefined;
+      this.mounted.forEach(element => setData(element, 'nativeListAnimateReorder', true));
+      this.recomputeLayout();
+    }
+    this.updateReorderVisualState();
+  }
+  hideReorderPreview() {
+    if (this.reorderDropTimer !== undefined) {
+      this.document.defaultView?.clearTimeout(this.reorderDropTimer);
+      this.reorderDropTimer = undefined;
+    }
+    this.clearReorderPreviewVisual();
+    this.reorderSettlingKey = undefined;
+    this.reorderExpandingKey = undefined;
+    if (this.reorderCompactKey) {
+      this.reorderCompactKey = undefined;
+      this.recomputeLayout();
+    }
+  }
+  updateReorderPreview(state) {
+    if (this.reorderPreview.hidden || state.previewOffsetX === undefined || state.previewOffsetY === undefined) return;
+    const x = state.clientX - state.previewOffsetX;
+    const y = state.clientY - state.previewOffsetY;
+    this.reorderPreview.style.transform = 'translate3d(' + String(x) + 'px,' + String(y) + 'px,0)';
+  }
+  reorderViewportRect() {
+    const {
+      left,
+      top,
+      right,
+      bottom,
+      width,
+      height
+    } = this.viewport.getBoundingClientRect();
+    return {
+      left,
+      top,
+      right,
+      bottom,
+      width,
+      height
+    };
+  }
+  scheduleReorderMove() {
+    if (this.reorderMoveFrame !== undefined || !this.pointerReorder?.active) return;
+    this.reorderMoveFrame = this.requestFrame(this.runReorderMove);
+  }
+  runReorderMove = () => {
+    this.reorderMoveFrame = undefined;
+    const state = this.pointerReorder;
+    if (!state?.active) return;
+    this.updateReorderPreview(state);
+    this.movePointerReorderTo(state.clientX, state.clientY);
+  };
+  flushReorderMove(state) {
+    if (this.reorderMoveFrame !== undefined) {
+      this.cancelFrame(this.reorderMoveFrame);
+      this.reorderMoveFrame = undefined;
+    }
+    if (this.pointerReorder !== state || !state.active) return;
+    this.updateReorderPreview(state);
+    this.movePointerReorderTo(state.clientX, state.clientY);
+  }
+  stopReorderMove() {
+    if (this.reorderMoveFrame === undefined) return;
+    this.cancelFrame(this.reorderMoveFrame);
+    this.reorderMoveFrame = undefined;
+  }
+  reorderIndexAtPointer(state, clientX, clientY) {
+    const rect = state.viewportRect ?? this.reorderViewportRect();
+    const local = this.layout.horizontal ? Math.max(0, Math.min(Math.max(0, rect.width - 1), clientX - rect.left)) : Math.max(0, Math.min(Math.max(0, rect.height - 1), clientY - rect.top));
+    const coordinate = this.currentOffset() + local;
+    const centerAt = index => {
+      const item = this.layout.items[index];
+      return item ? (itemStart(item, this.layout.horizontal) + itemEnd(item, this.layout.horizontal)) / 2 : Number.POSITIVE_INFINITY;
+    };
+    let low = 0;
+    let high = this.layout.items.length;
+    while (low < high) {
+      const middle = Math.floor((low + high) / 2);
+      if (centerAt(middle) < coordinate) low = middle + 1;else high = middle;
+    }
+    const previous = Math.max(0, low - 1);
+    const next = Math.min(this.layout.items.length - 1, low);
+    const nearest = Math.abs(centerAt(previous) - coordinate) <= Math.abs(centerAt(next) - coordinate) ? previous : next;
+    return this.layout.items[nearest]?.index ?? -1;
+  }
+  movePointerReorderTo(clientX, clientY) {
+    const state = this.pointerReorder;
+    if (!state?.active) return;
+    const fromIndex = state.currentIndex;
+    const toIndex = this.reorderIndexAtPointer(state, clientX, clientY);
+    const from = state.workingRows[fromIndex];
+    const to = state.workingRows[toIndex];
+    if (!from || !to || fromIndex === toIndex || !this.isReorderable(from) || !this.isReorderable(to) || from.sectionKey !== to.sectionKey) return;
+    const [moved] = state.workingRows.splice(fromIndex, 1);
+    if (!moved) return;
+    state.workingRows.splice(toIndex, 0, moved);
+    state.currentIndex = toIndex;
+    const canReuseLayout = this.canReuseReorderLayout(fromIndex, toIndex);
+    this.snapshot = {
+      ...this.snapshot,
+      rows: state.workingRows
+    };
+    this.rows = state.workingRows;
+    this.remapMountedRowsForMove(fromIndex, toIndex);
+    if (canReuseLayout) this.renderWindow();else this.recomputeLayout();
+    this.updateReorderVisualState();
+  }
+  canReuseReorderLayout(fromIndex, toIndex) {
+    const start = Math.min(fromIndex, toIndex);
+    const end = Math.max(fromIndex, toIndex);
+    const first = this.layout.items[start];
+    if (!first || this.layout.items.length !== this.rows.length) return false;
+    for (let index = start + 1; index <= end; index += 1) {
+      const item = this.layout.items[index];
+      if (!item || item.width !== first.width || item.height !== first.height) return false;
+    }
+    return true;
+  }
+  remapMountedRowsForMove(fromIndex, toIndex) {
+    const remapped = [];
+    this.mounted.forEach((element, index) => {
+      let nextIndex = index;
+      if (index === fromIndex) nextIndex = toIndex;else if (fromIndex < toIndex && index > fromIndex && index <= toIndex) nextIndex = index - 1;else if (fromIndex > toIndex && index >= toIndex && index < fromIndex) nextIndex = index + 1;
+      setData(element, 'nativeListAnimateReorder', true);
+      setData(element, 'nativeListRowIndex', nextIndex);
+      remapped.push([nextIndex, element]);
+    });
+    this.mounted.clear();
+    remapped.forEach(([index, element]) => this.mounted.set(index, element));
+  }
+  reorderAutoScrollVelocity() {
+    const state = this.pointerReorder;
+    if (!state?.active) return 0;
+    const rect = state.viewportRect ?? this.reorderViewportRect();
+    const point = this.layout.horizontal ? state.clientX : state.clientY;
+    const start = this.layout.horizontal ? rect.left : rect.top;
+    const end = this.layout.horizontal ? rect.right : rect.bottom;
+    return webReorderAutoScrollVelocity(point, start, end, Date.now() - (state.activatedAt ?? 0));
+  }
+  scheduleReorderAutoScroll() {
+    if (this.reorderAutoScrollFrame !== undefined || !this.pointerReorder?.active) return;
+    this.reorderAutoScrollFrame = this.requestFrame(this.runReorderAutoScroll);
+  }
+  runReorderAutoScroll = () => {
+    this.reorderAutoScrollFrame = undefined;
+    const state = this.pointerReorder;
+    if (!state?.active) return;
+    const velocity = this.reorderAutoScrollVelocity();
+    if (velocity === 0) return;
+    const before = this.currentOffset();
+    this.setCurrentOffset(before + velocity);
+    if (this.currentOffset() !== before) {
+      this.movePointerReorderTo(state.clientX, state.clientY);
+      this.scheduleReorderAutoScroll();
+    }
+  };
+  handleReorderPointerEnd = event => {
+    const state = this.pointerReorder;
+    if (!state || state.pointerId !== event.pointerId) return;
+    this.clearReorderLongPress(state);
+    this.releaseReorderPointer(state);
+    if (!state.active) {
+      this.pointerReorder = undefined;
+      return;
+    }
+    event.preventDefault();
+    state.clientX = event.clientX;
+    state.clientY = event.clientY;
+    this.completePointerReorder(state);
+  };
+  completePointerReorder(state) {
+    this.flushReorderMove(state);
+    const finalRows = this.snapshot.rows;
+    const reorderEvent = webReorderEventForRows(state.originalRows, finalRows, state.sourceKey);
+    this.animateReorderPreviewToCurrent(state);
+    this.pointerReorder = undefined;
+    this.stopReorderMove();
+    this.stopReorderAutoScroll();
+    this.suppressClickUntil = Date.now() + 300;
+    this.updateReorderVisualState();
+    if (reorderEvent) this.callbacks.onReorder?.(reorderEvent);
+  }
+  handleReorderPointerCancel = event => {
+    if (this.pointerReorder?.pointerId !== event.pointerId) return;
+    if (this.pointerReorder.active && this.pointerReorder.pointerType !== 'mouse') return;
+    this.cancelPointerReorder(true);
+  };
+  stopReorderAutoScroll() {
+    if (this.reorderAutoScrollFrame === undefined) return;
+    this.cancelFrame(this.reorderAutoScrollFrame);
+    this.reorderAutoScrollFrame = undefined;
+  }
+  cancelPointerReorder(restore) {
+    const state = this.pointerReorder;
+    if (!state) return;
+    this.clearReorderLongPress(state);
+    this.releaseReorderPointer(state);
+    this.pointerReorder = undefined;
+    this.stopReorderMove();
+    this.stopReorderAutoScroll();
+    if (state.active && restore) {
+      this.remapMountedRows(state.originalRows);
+      this.setSnapshot({
+        ...this.snapshot,
+        rows: cancelWebReorderRows(state.originalRows)
+      }, this.selectedKeys);
+      this.suppressClickUntil = Date.now() + 300;
+    }
+    if (state.active && restore) this.animateReorderPreviewToCurrent(state);else this.hideReorderPreview();
+    this.updateReorderVisualState();
+  }
+  remapMountedRows(rows) {
+    const elementByKey = new Map();
+    this.mounted.forEach(element => {
+      const key = element.dataset.nativeListRowKey;
+      if (key) elementByKey.set(key, element);
+      setData(element, 'nativeListAnimateReorder', true);
+    });
+    this.mounted.clear();
+    rows.forEach((row, index) => {
+      const element = elementByKey.get(row.key);
+      if (element) {
+        setData(element, 'nativeListRowIndex', index);
+        this.mounted.set(index, element);
+      }
+    });
+  }
+  updateReorderVisualState() {
+    const sourceKey = this.pointerReorder?.active ? this.pointerReorder.sourceKey : this.keyboardReorder?.sourceKey ?? this.reorderSettlingKey;
+    setData(this.root, 'nativeListDragging', Boolean(sourceKey));
+    if (this.reorderMovementTimer !== undefined) {
+      this.document.defaultView?.clearTimeout(this.reorderMovementTimer);
+      this.reorderMovementTimer = undefined;
+    }
+    if (!sourceKey) {
+      this.reorderMovementTimer = this.document.defaultView?.setTimeout(() => {
+        this.reorderMovementTimer = undefined;
+        this.reorderExpandingKey = undefined;
+        this.mounted.forEach(element => {
+          setData(element, 'nativeListAnimateReorder', false);
+          setData(element, 'nativeListReorderExpanding', false);
+        });
+      }, WEB_REORDER_ANIMATION.outOfWayDurationMs);
+    }
+    this.mounted.forEach(element => {
+      const dragging = element.dataset.nativeListRowKey === sourceKey;
+      setData(element, 'nativeListReorderExpanding', element.dataset.nativeListRowKey === this.reorderExpandingKey);
+      setData(element, 'nativeListDragging', dragging);
+      if (dragging) element.setAttribute('aria-grabbed', 'true');else element.removeAttribute('aria-grabbed');
+    });
+  }
+}
+//# sourceMappingURL=NativeListWebEngine.js.map