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

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

@@ -0,0 +1,172 @@
+"use strict";
+
+import { captureInlineStyles, createElement, restoreInlineStyles, setData, tagSlot } from "./RowElements.js";
+import { RowVisualStyle } from "./RowVisual.js";
+const toneColor = (tone, fallback) => tone === 'positive' ? 'var(--nl-positive)' : tone === 'negative' ? 'var(--nl-negative)' : tone === 'secondary' ? 'var(--nl-secondary)' : `var(--nl-${fallback})`;
+function createBadge(document, badge) {
+  const label = tagSlot(createElement(document, 'span', 'ok-native-list-badge', badge.text), 'badge');
+  label.dataset.tone = badge.tone ?? '';
+  return label;
+}
+function createMetricCell(document, primitives, metric, shaded) {
+  const cell = createElement(document, 'div', 'ok-native-list-composite-cell');
+  setData(cell, 'shaded', shaded);
+  cell.appendChild(createElement(document, 'div', 'ok-native-list-secondary', metric.label));
+  const valueLine = createElement(document, 'div');
+  valueLine.style.display = 'flex';
+  valueLine.style.alignItems = 'center';
+  valueLine.style.gap = '6px';
+  if (metric.visual) {
+    const visual = primitives.visual(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(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(document, primitives, row) {
+  if (row.variant === 'activity' || row.variant === 'performance') {
+    const body = createElement(document, 'div', 'ok-native-list-row ok-native-list-composite');
+    body.appendChild(tagSlot(createElement(document, 'div', 'ok-native-list-composite-heading', row.title), 'title'));
+    const metrics = row.metrics ?? [];
+    const firstLine = createElement(document, 'div', 'ok-native-list-composite-row');
+    metrics.slice(0, 2).forEach(metric => firstLine.appendChild(createMetricCell(document, primitives, metric, false)));
+    body.appendChild(firstLine);
+    if (row.variant === 'activity') {
+      body.appendChild(createElement(document, 'div', 'ok-native-list-divider'));
+    } else {
+      const progress = createElement(document, 'div', 'ok-native-list-progress');
+      const fill = createElement(document, 'span');
+      fill.style.width = String(Math.round((row.progress ?? 0) * 100)) + '%';
+      progress.appendChild(fill);
+      body.appendChild(progress);
+    }
+    const secondLine = createElement(document, 'div', 'ok-native-list-composite-row');
+    metrics.slice(2).forEach(metric => secondLine.appendChild(createMetricCell(document, primitives, metric, row.variant === 'performance')));
+    body.appendChild(secondLine);
+    return body;
+  }
+  const body = createElement(document, 'div', 'ok-native-list-row ok-native-list-metric');
+  if (row.visual) {
+    const visual = primitives.visual(row.visual);
+    if (visual) body.appendChild(visual);
+  }
+  body.appendChild(tagSlot(createElement(document, 'div', 'ok-native-list-secondary', row.title), 'title'));
+  body.appendChild(tagSlot(createElement(document, 'div', 'ok-native-list-metric-value', row.value), 'value'));
+  if (row.trend) {
+    const trend = tagSlot(createElement(document, 'div', 'ok-native-list-secondary', row.trend), '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(tagSlot(createElement(document, 'div', 'ok-native-list-secondary', row.subtitle), 'subtitle'));
+  if (row.badge) body.appendChild(createBadge(document, row.badge));
+  return body;
+}
+const views = new WeakMap();
+function bind(body, row, primitives) {
+  const v = views.get(body);
+  v.primitives = primitives;
+  // Text styles are part of the key: applyTextLayout inserts wrappers and
+  // rewrites text (lines: 1), which restoring inline styles cannot undo.
+  // Rebuilding reuses equal visual slots, so images never restart.
+  const contentKey = JSON.stringify({
+    ...row,
+    style: {
+      title: row.style?.title,
+      value: row.style?.value,
+      trend: row.style?.trend,
+      subtitle: row.style?.subtitle
+    }
+  });
+  if (contentKey !== v.contentKey) {
+    let index = 0;
+    restoreInlineStyles(v.defaults);
+    const next = createMetricRow(body.ownerDocument, {
+      ...primitives,
+      visual: source => {
+        const slot = index++;
+        const key = JSON.stringify([row.key, row.variant ?? 'standard', source]);
+        const previous = v.visuals[slot];
+        if (previous?.key === key) return previous.node;
+        if (previous) primitives.dispose(previous.node);
+        const node = primitives.visual(source);
+        if (node) v.visuals[slot] = {
+          key,
+          node
+        };
+        return node;
+      }
+    }, row);
+    v.visuals.slice(index).forEach(slot => primitives.dispose(slot.node));
+    v.visuals.length = index;
+    body.replaceChildren(...Array.from(next.childNodes));
+    body.className = next.className;
+    body.style.cssText = next.style.cssText;
+    // Image opacity is loading state; restoring it would hide loaded images.
+    v.defaults = captureInlineStyles(body);
+    const leading = body.querySelector(':scope > .ok-native-list-visual, :scope > .ok-native-list-stacked');
+    v.visualStyle = leading ? new RowVisualStyle(leading) : undefined;
+    v.contentKey = contentKey;
+  }
+  restoreInlineStyles(v.defaults);
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  const style = row.style;
+  const composite = row.variant === 'activity' || row.variant === 'performance';
+  if (style?.horizontalPadding !== undefined) body.style.paddingInline = `${style.horizontalPadding}px`;
+  if (style?.verticalPadding !== undefined) body.style.paddingBlock = `${style.verticalPadding}px`;
+  if (style?.lineGap !== undefined) body.style.rowGap = `${style.lineGap}px`;
+  if (!composite && v.visualStyle) {
+    v.visualStyle.apply(style?.image, style?.image?.width ?? 40, style?.image?.height ?? 40, 0);
+    const leading = body.querySelector(':scope > .ok-native-list-visual, :scope > .ok-native-list-stacked');
+    leading.style.marginBottom = style?.leadingGap === undefined ? '' : `${style.leadingGap - (style.lineGap ?? 5)}px`;
+  }
+  const slots = composite ? ['title'] : ['title', 'value', 'trend', 'subtitle'];
+  slots.forEach(slot => {
+    const text = style?.[slot];
+    if (text) body.querySelectorAll(`[data-nl-slot="${slot}"]`).forEach(node => primitives.textStyle(node, text));
+  });
+}
+function create(document, row, primitives) {
+  const body = document.createElement('div');
+  body.dataset.nlRenderer = 'metricCard';
+  views.set(body, {
+    contentKey: '',
+    visuals: [],
+    defaults: new Map(),
+    primitives
+  });
+  bind(body, row, primitives);
+  return body;
+}
+function recycle(body) {
+  const v = views.get(body);
+  if (!v) return;
+  v.visuals.forEach(slot => v.primitives.dispose(slot.node));
+  v.visuals = [];
+  v.defaults.clear();
+  v.contentKey = '';
+  v.visualStyle = undefined;
+  body.replaceChildren();
+}
+export const metricCardRowRenderer = {
+  key: 'metricCard',
+  create,
+  bind,
+  recycle,
+  measure: (row, _width) => row.variant === 'activity' ? 161 : row.variant === 'performance' ? 178 : 132,
+  measureRendered: (_body, _row) => undefined
+};
+//# sourceMappingURL=MetricCardRowRenderer.js.map

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

@@ -0,0 +1,98 @@
+"use strict";
+
+import { RowVisualStyle } from "./RowVisual.js";
+export function resolveRailRow(row) {
+  const style = row.style;
+  return {
+    horizontalPadding: style?.horizontalPadding ?? 4,
+    verticalPadding: style?.verticalPadding ?? 4,
+    leadingGap: style?.leadingGap ?? 6,
+    badgeGap: style?.titleBadgeGap ?? 6,
+    trailingGap: style?.trailingGap ?? 6,
+    width: style?.image?.width ?? 20,
+    height: style?.image?.height ?? 20,
+    title: row.title,
+    badge: row.badge?.text ?? '',
+    status: row.status === 'none' ? '' : row.status ?? ''
+  };
+}
+const views = new WeakMap();
+function bind(body, row, primitives) {
+  const v = views.get(body);
+  v.primitives = primitives;
+  const r = resolveRailRow(row);
+  body.style.cssText = '';
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  body.style.padding = `${r.verticalPadding}px ${r.horizontalPadding}px`;
+  const text = (view, value, style) => {
+    view.style.cssText = '';
+    view.textContent = value;
+    if (style) primitives.textStyle(view, style);
+    if (value) body.appendChild(view);else view.remove();
+  };
+  text(v.title, r.title, row.style?.title);
+  text(v.badge, r.badge, row.style?.badge);
+  if (row.badge?.tone) v.badge.dataset.tone = row.badge.tone;else delete v.badge.dataset.tone;
+  v.badge.style.marginInlineStart = `${r.badgeGap - 6}px`;
+  text(v.status, r.status, row.style?.status);
+  v.status.style.marginInlineStart = `${r.trailingGap - 6}px`;
+  const identity = JSON.stringify([row.key, row.visual]);
+  if (identity !== v.identity) {
+    if (v.visual) {
+      primitives.dispose(v.visual);
+      v.visual.remove();
+    }
+    v.visual = primitives.visual(row.visual);
+    v.visualStyle = v.visual ? new RowVisualStyle(v.visual) : undefined;
+    v.identity = identity;
+  }
+  if (v.visual) body.insertBefore(v.visual, body.firstChild);
+  v.visualStyle?.apply(row.style?.image, r.width, r.height, r.leadingGap - 6);
+}
+function create(document, row, primitives) {
+  const span = (className, slot) => {
+    const view = document.createElement('span');
+    view.className = className;
+    view.dataset.nlSlot = slot;
+    return view;
+  };
+  const body = document.createElement('div');
+  body.className = 'ok-native-list-row ok-native-list-rail';
+  body.dataset.nlRenderer = 'rail';
+  views.set(body, {
+    title: span('ok-native-list-rail-title', 'title'),
+    badge: span('ok-native-list-badge', 'badge'),
+    status: span('ok-native-list-secondary', 'status'),
+    identity: '',
+    primitives
+  });
+  bind(body, row, primitives);
+  return body;
+}
+function recycle(body) {
+  const v = views.get(body);
+  if (!v) return;
+  if (v.visual) {
+    v.primitives.dispose(v.visual);
+    v.visual.remove();
+  }
+  v.visual = undefined;
+  v.visualStyle = undefined;
+  v.identity = '';
+}
+export function measureRailWidth(row) {
+  const r = resolveRailRow(row);
+  const width = (value, style, size) => value.length * 7 * ((style?.fontSize ?? size) / size);
+  // Retain the historical 50px allowance and viewport limits at default values.
+  return Math.min(288, Math.max(72, 50 + width(r.title, row.style?.title, 12) + width(r.badge, row.style?.badge, 11) + width(r.status, row.style?.status, 13) + (r.horizontalPadding - 4) * 2 + r.width - 20 + r.leadingGap - 6 + (r.badge ? r.badgeGap - 6 : 0) + (r.status ? r.trailingGap - 6 : 0)));
+}
+export const railRowRenderer = {
+  key: 'rail',
+  create,
+  bind,
+  recycle,
+  measure: (_row, _width) => 40,
+  measureRendered: (_body, _row) => undefined
+};
+//# sourceMappingURL=RailRowRenderer.js.map

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

@@ -0,0 +1,100 @@
+"use strict";
+
+// Inline properties written by the container pass, per row body. Renderers only
+// reset the nodes they own, so the container undoes its own writes on rebind.
+const writesByBody = new WeakMap();
+function restoreContainerWrites(body, force) {
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  const writes = writesByBody.get(body);
+  if (!writes) return;
+  writesByBody.delete(body);
+  // Undo in reverse so repeated writes restore the oldest value.
+  for (let index = writes.length - 1; index >= 0; index -= 1) {
+    const write = writes[index];
+    const {
+      style
+    } = write.element;
+    // Fallback path only (no reset before the renderer bind): a renderer that
+    // already rewrote this property owns its current value. It cannot tell a
+    // renderer rewrite of the same value apart, which is why the engine and
+    // WalletGroup reset before binding instead.
+    if (!force && style.getPropertyValue(write.property) !== write.written) continue;
+    style.removeProperty(write.property);
+    if (write.previous) style.setProperty(write.property, write.previous, write.previousPriority);
+  }
+}
+
+/**
+ * Undo the previous container pass before a renderer rebinds `body`, so the
+ * renderer always writes over its own baseline and the next
+ * `applyRowContainerStyle` records that fresh value as the value to restore.
+ */
+export function resetRowContainerStyle(body) {
+  restoreContainerWrites(body, true);
+}
+function writeProperty(body, element, property, value, priority = '') {
+  const {
+    style
+  } = element;
+  const write = {
+    element,
+    property,
+    previous: style.getPropertyValue(property),
+    previousPriority: style.getPropertyPriority(property),
+    written: ''
+  };
+  style.setProperty(property, value, priority);
+  write.written = style.getPropertyValue(property);
+  let writes = writesByBody.get(body);
+  if (!writes) writesByBody.set(body, writes = []);
+  writes.push(write);
+}
+export function applyRowContainerStyle(body, row) {
+  restoreContainerWrites(body, false);
+  const set = (element, property, value) => writeProperty(body, element, property, value);
+  if (row.type === 'system' && row.variant === 'warning' && (row.style?.container?.height ?? row.height) !== undefined) set(body, 'height', '100%');
+  const container = row.style?.container;
+  if (!container) return;
+  if (container.backgroundColor !== undefined) {
+    set(body, '--nl-container-background', container.backgroundColor);
+    body.setAttribute('data-nl-container-background', 'true');
+    // A CSS rule allows existing hover/press feedback to override the resting fill.
+    // The template/engine re-applies its own fill on every bind, so this
+    // removal is not tracked for restoration.
+    body.style.removeProperty('background');
+    body.style.removeProperty('background-color');
+  }
+  if (container.cornerRadius !== undefined) set(body, 'border-radius', `${container.cornerRadius}px`);
+  if (container.borderWidth !== undefined) {
+    // Paint above member backgrounds without changing the content box or hit targets.
+    body.setAttribute('data-nl-container-border', 'true');
+    set(body, '--nl-container-border-width', `${container.borderWidth}px`);
+    set(body, '--nl-container-border-color', container.borderColor ?? 'transparent');
+    set(body, 'border-color', 'transparent');
+  } else if (container.borderColor !== undefined) set(body, 'border-color', container.borderColor);
+  if (container.contentVerticalAlignment !== undefined) {
+    const alignment = {
+      top: 'flex-start',
+      center: 'center',
+      bottom: 'flex-end'
+    }[container.contentVerticalAlignment];
+    const vertical = row.type === 'walletGroup' || row.type === 'mediaTile' || row.type === 'metricCard' || row.type === 'identity' && row.presentation === 'walletSidebar' || row.type === 'system' && row.variant === 'warning';
+    if (vertical) {
+      set(body, 'display', 'flex');
+      set(body, 'flex-direction', 'column');
+      if (row.type === 'mediaTile') set(body, 'gap', '0px');
+      set(body, 'justify-content', alignment);
+      Array.from(body.children).forEach(child => {
+        set(child, 'flex-shrink', '0');
+      });
+    } else {
+      set(body, 'align-items', alignment);
+      // Timestamp/accessory defaults may have their own align-self.
+      Array.from(body.children).forEach(child => {
+        set(child, 'align-self', alignment);
+      });
+    }
+  }
+}
+//# sourceMappingURL=RowContainerStyle.js.map

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

@@ -0,0 +1,93 @@
+"use strict";
+
+export function createElement(document, tag, className, text) {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  if (text !== undefined) element.textContent = text;
+  return element;
+}
+export function setData(element, name, value) {
+  if (value === undefined) delete element.dataset[name];else element.dataset[name] = String(value);
+}
+export function tagSlot(element, slot) {
+  element.dataset.nlSlot = slot;
+  return element;
+}
+export function markActionAnchorSource(element, source, slot) {
+  setData(element, 'nativeListAnchorSource', source);
+  if (slot !== undefined) setData(element, 'nativeListAnchorSlot', slot);
+}
+export function createTextColumn(document, title, subtitle, tertiary, tertiaryTone, badges, slots = {
+  title: 'title',
+  subtitle: 'subtitle',
+  tertiary: 'tertiary'
+}) {
+  const column = createElement(document, 'span', 'ok-native-list-flex');
+  const titleLine = tagSlot(createElement(document, 'span', 'ok-native-list-title', title), slots.title);
+  if (badges?.length) {
+    titleLine.removeAttribute('data-nl-slot');
+    titleLine.replaceChildren(tagSlot(createElement(document, 'span', undefined, title), slots.title));
+    const badgeLine = createElement(document, 'span', 'ok-native-list-badges');
+    badges.forEach(badge => badgeLine.appendChild(createBadge(document, badge)));
+    titleLine.appendChild(badgeLine);
+  }
+  column.appendChild(titleLine);
+  if (subtitle) column.appendChild(tagSlot(createElement(document, 'span', 'ok-native-list-secondary', subtitle), slots.subtitle));
+  if (tertiary) {
+    const element = tagSlot(createElement(document, 'span', tertiaryTone === 'info' ? 'ok-native-list-secondary ok-native-list-info' : 'ok-native-list-secondary ok-native-list-tertiary', tertiary), slots.tertiary);
+    column.appendChild(element);
+  }
+  return column;
+}
+export function createBadge(document, badge) {
+  const element = tagSlot(createElement(document, 'span', 'ok-native-list-badge', badge.text), 'badge');
+  setData(element, 'tone', badge.tone);
+  return element;
+}
+
+// Selector digits retain their font family, including explicit button fonts.
+export function applyTabularNumbers(body) {
+  body.style.fontVariantNumeric = 'tabular-nums';
+  body.querySelectorAll('span,button').forEach(text => {
+    text.style.fontVariantNumeric = 'tabular-nums';
+  });
+}
+
+/**
+ * Selector presentations use their explicit-height geometry whenever the row
+ * has a resolved explicit height: the legacy `row.height` or the preferred
+ * `style.container.height`.
+ */
+export function hasExplicitRowHeight(row) {
+  return (row.style?.container?.height ?? row.height) !== undefined;
+}
+
+/** Legacy `size` preset adjustment, applied by templates that opt in. */
+export function rowSizeModifier(size) {
+  if (size === 'small') return -8;
+  if (size === 'large') return 12;
+  return 0;
+}
+
+// Async image reveal state is owned by the image lifecycle, not by template
+// defaults: a reused image that already fired `load` never fires it again.
+const isImageLoadingNode = node => node.tagName === 'IMG' || node.classList.contains('ok-native-list-selector-image-background');
+
+/** Captures factory inline styles of a template subtree. */
+export function captureInlineStyles(root) {
+  return new Map([root, ...root.querySelectorAll('*')].map(node => [node, node.style.cssText]));
+}
+
+/** Restores captured factory styles while keeping image loading visibility. */
+export function restoreInlineStyles(defaults) {
+  defaults.forEach((css, node) => {
+    if (!isImageLoadingNode(node)) {
+      node.style.cssText = css;
+      return;
+    }
+    const opacity = node.style.opacity;
+    node.style.cssText = css;
+    node.style.opacity = opacity;
+  });
+}
+//# sourceMappingURL=RowElements.js.map

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

@@ -0,0 +1,70 @@
+"use strict";
+
+import { walletGroupRowRenderer } from "./WalletGroupRowRenderer.js";
+import { identityRowRenderer } from "./IdentityRowRenderer.js";
+import { sectionHeaderRowRenderer } from "./SectionHeaderRowRenderer.js";
+import { marketRowRenderer } from "./MarketRowRenderer.js";
+import { metricCardRowRenderer } from "./MetricCardRowRenderer.js";
+import { dataRowRenderer } from "./DataRowRenderer.js";
+import { activityRowRenderer } from "./ActivityRowRenderer.js";
+import { systemRowRenderer } from "./SystemRowRenderer.js";
+import { actionRowRenderer } from "./ActionRowRenderer.js";
+import { mediaTileRowRenderer } from "./MediaTileRowRenderer.js";
+import { messageRowRenderer } from "./MessageRowRenderer.js";
+import { railRowRenderer } from "./RailRowRenderer.js";
+function registration(renderer, row) {
+  return {
+    key: renderer.key,
+    appliesSizePreset: renderer.appliesSizePreset?.(row) ?? true,
+    create: (document, primitives) => renderer.create(document, row, primitives),
+    bind: (body, primitives) => renderer.bind(body, row, primitives),
+    measure: (width, layout) => renderer.measure(row, width, layout),
+    measureRendered: body => renderer.measureRendered(body, row),
+    reorderPreview: body => renderer.reorderPreview?.(body, row)
+  };
+}
+const factories = {
+  walletGroup: row => registration(walletGroupRowRenderer, row),
+  identity: row => registration(identityRowRenderer, row),
+  sectionHeader: row => registration(sectionHeaderRowRenderer, row),
+  market: row => registration(marketRowRenderer, row),
+  metricCard: row => registration(metricCardRowRenderer, row),
+  dataRow: row => registration(dataRowRenderer, row),
+  activity: row => registration(activityRowRenderer, row),
+  system: row => registration(systemRowRenderer, row),
+  action: row => registration(actionRowRenderer, row),
+  message: row => registration(messageRowRenderer, row),
+  rail: row => registration(railRowRenderer, row),
+  mediaTile: row => registration(mediaTileRowRenderer, row)
+};
+const renderers = {
+  walletGroup: walletGroupRowRenderer,
+  identity: identityRowRenderer,
+  sectionHeader: sectionHeaderRowRenderer,
+  market: marketRowRenderer,
+  metricCard: metricCardRowRenderer,
+  dataRow: dataRowRenderer,
+  activity: activityRowRenderer,
+  system: systemRowRenderer,
+  action: actionRowRenderer,
+  message: messageRowRenderer,
+  rail: railRowRenderer,
+  mediaTile: mediaTileRowRenderer
+};
+const isRegistered = key => Object.prototype.hasOwnProperty.call(factories, key);
+
+// Closed registration; a row's data key, styles and placement never affect reuse.
+export function rowRenderer(row) {
+  if (!isRegistered(row.type)) throw new Error('No renderer registered for ' + row.type);
+  return factories[row.type](row);
+}
+export function rowRendererKey(row) {
+  return row.type;
+}
+export function recycleRowBody(body) {
+  const key = body.dataset.nlRenderer ?? '';
+  if (!isRegistered(key)) return false;
+  renderers[key].recycle(body);
+  return true;
+}
+//# sourceMappingURL=RowRendererRegistry.js.map

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

@@ -0,0 +1,121 @@
+"use strict";
+
+import { createElement } from "./RowElements.js";
+export function applyValueSegments(element, segments, fontSize = 16, lineHeight = 24, weight = 500) {
+  if (!segments?.length) return;
+  element.textContent = '';
+  element.style.fontSize = String(fontSize) + 'px';
+  element.style.lineHeight = String(lineHeight) + 'px';
+  element.style.fontWeight = String(weight);
+  segments.forEach(segment => {
+    const span = createElement(element.ownerDocument, 'span', undefined, segment.text);
+    if (segment.style === 'subscript') {
+      span.dataset.nlSegment = 'subscript';
+      applySubscriptMetrics(span, fontSize);
+    }
+    element.appendChild(span);
+  });
+}
+// Legacy subscript metrics: 60% of the field size on a field-size line box.
+function applySubscriptMetrics(span, fontSize) {
+  span.style.fontSize = String(Math.ceil(fontSize * 0.6)) + 'px';
+  span.style.lineHeight = String(fontSize) + 'px';
+}
+export function applyTextLayout(element, style, defaultLines) {
+  if (style.lines === undefined && style.truncate === undefined && style.verticalAlignment === undefined && style.offsetY === undefined && defaultLines === undefined) return;
+  let content = element.querySelector(':scope > .ok-native-list-text-content');
+  // Line clamps are only ever written inline by templates (no stylesheet rule
+  // sets them), so no computed-style read is needed; this also keeps the result
+  // identical for attached and detached rows.
+  const inheritedClamp = Number(element.style.getPropertyValue('-webkit-line-clamp'));
+  const lines = style.lines ?? defaultLines ?? (inheritedClamp || 1);
+  if (!content && (style.verticalAlignment !== undefined || style.offsetY !== undefined || element.classList.contains('ok-native-list-market-change'))) {
+    content = element.ownerDocument.createElement('span');
+    content.className = 'ok-native-list-text-content';
+    content.append(...Array.from(element.childNodes));
+    element.appendChild(content);
+    element.style.display = 'flex';
+    element.style.flexDirection = 'column';
+    element.style.removeProperty('-webkit-line-clamp');
+    element.style.removeProperty('-webkit-box-orient');
+    content.style.minWidth = '0';
+    content.style.flex = '0 1 auto';
+    content.style.width = '100%';
+  }
+  const text = content ?? element;
+  if (style.verticalAlignment !== undefined) {
+    element.style.justifyContent = {
+      top: 'flex-start',
+      center: 'center',
+      bottom: 'flex-end'
+    }[style.verticalAlignment];
+  }
+  if (style.offsetY !== undefined) text.style.transform = `translateY(${style.offsetY}px)`;
+  if (style.lines === undefined && style.truncate === undefined && defaultLines === undefined && !inheritedClamp) {
+    if (content) {
+      // Inherit the slot's resolved wrapping/truncation from CSS or inline style.
+      content.style.whiteSpace = 'inherit';
+      content.style.textOverflow = 'inherit';
+      content.style.overflow = 'hidden';
+    }
+    return;
+  }
+  if (lines === 1) {
+    const walker = element.ownerDocument.createTreeWalker(text, 4 /* SHOW_TEXT */);
+    let previousCarriageReturn = false;
+    while (walker.nextNode()) {
+      const value = walker.currentNode.nodeValue ?? '';
+      if (!value) continue;
+      // A CRLF pair may straddle two styled runs.
+      const textValue = previousCarriageReturn && value.startsWith('\n') ? value.slice(1) : value;
+      walker.currentNode.nodeValue = textValue.replace(/\r\n|[\r\n]/g, ' ');
+      previousCarriageReturn = value.endsWith('\r');
+    }
+  }
+  text.style.whiteSpace = lines === 1 ? 'nowrap' : 'pre-wrap';
+  text.style.overflow = 'hidden';
+  text.style.textOverflow = style.truncate === 'clip' ? 'clip' : 'ellipsis';
+  text.style.removeProperty('-webkit-line-clamp');
+  text.style.removeProperty('-webkit-box-orient');
+  text.style.maxHeight = '';
+  if (lines > 1 && style.truncate !== 'clip') {
+    text.style.display = '-webkit-box';
+    text.style.setProperty('-webkit-line-clamp', String(lines));
+    text.style.setProperty('-webkit-box-orient', 'vertical');
+  } else {
+    text.style.display = 'block';
+    if (lines > 1) {
+      // Rows are styled before mounting, when computed typography is unavailable.
+      // Resolve omitted line height in CSS after the template rules take effect.
+      text.style.maxHeight = style.lineHeight !== undefined ? `${lines * style.lineHeight}px` : `${lines}lh`;
+    }
+  }
+}
+export function applyTextStyleToSlot(element, style, defaultLines) {
+  if (style.fontSize !== undefined) element.style.fontSize = String(style.fontSize) + 'px';
+  if (style.lineHeight !== undefined) element.style.lineHeight = String(style.lineHeight) + 'px';
+  if (style.fontWeight !== undefined) element.style.fontWeight = String(fontWeight(style.fontWeight, 400));
+  if (style.color !== undefined) element.style.color = style.color;
+  // Explicit overrides also apply to rich text runs, but never to sibling badges.
+  // Subscript segments keep their legacy size relative to the field size.
+  element.querySelectorAll('span').forEach(run => {
+    const subscript = run.dataset.nlSegment === 'subscript';
+    if (style.color !== undefined) run.style.color = style.color;
+    if (style.fontSize !== undefined) {
+      if (subscript) applySubscriptMetrics(run, style.fontSize);else run.style.fontSize = String(style.fontSize) + 'px';
+    }
+    if (style.fontWeight !== undefined) run.style.fontWeight = String(fontWeight(style.fontWeight, 400));
+    if (style.lineHeight !== undefined && !subscript) run.style.lineHeight = String(style.lineHeight) + 'px';
+    if (style.lines !== undefined || style.truncate !== undefined) run.style.whiteSpace = 'inherit';
+  });
+  if (style.alignment !== undefined) element.style.textAlign = style.alignment;
+  applyTextLayout(element, style, defaultLines);
+}
+export function fontWeight(value, fallback) {
+  if (value === 'bold') return 700;
+  if (value === 'semibold') return 600;
+  if (value === 'medium') return 500;
+  if (value === 'regular') return 400;
+  return fallback;
+}
+//# sourceMappingURL=RowText.js.map