@oxy.so/bloom 3.6.0 → 4.1.0

package/src/lead-score/LeadScoreCard.tsx

@@ -0,0 +1,286 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Card } from '../card';
+import { MeterRing } from '../stat-bar';
+import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import {
+  LEAD_FACTOR_MARK_RADIUS,
+  LEAD_FACTOR_MARK_SIZE,
+  LEAD_FACTOR_ROW_PADDING,
+  LEAD_SCORE_BAND,
+  LEAD_SCORE_CARD_PADDING,
+  LEAD_SCORE_PANEL_GAP,
+  LEAD_SCORE_PANEL_PADDING,
+  LEAD_SCORE_PANEL_RADIUS,
+  LEAD_SCORE_RING_SIZE,
+  LEAD_SCORE_RING_THICKNESS,
+  LEAD_SCORE_TREND,
+  TABULAR,
+} from './constants';
+import {
+  factorLine,
+  formatContribution,
+  resolveLeadScoreBand,
+  resolveLeadScorePaint,
+} from './shared';
+import type { LeadScoreCardProps } from './types';
+
+/**
+ * How good a lead is, and WHY.
+ *
+ * It is drawn the way Bloom draws a score — `chart-cards`' `SleepScoreCard` is
+ * the register, and the `BesideTheReference` story puts the two in one shot:
+ * TWO PANELS inside one card, the verdict on a tinted one and the breakdown on
+ * a neutral one.
+ *
+ *   header   a panel washed in the band's tone: the quiet `body-medium` label
+ *            ("Lead score") over the `title-1-medium` verdict ("Hot") with the
+ *            band's glyph, the trend as a quiet icon-and-label line, and then
+ *            the ring — 132 across, CENTRED, with the score at
+ *            `display-4-medium` inside it
+ *   factors  a neutral panel, padded on the LEFT only so the rules run to its
+ *            right edge: one row per factor — a small mark, the label and its
+ *            detail as one reading line, and the signed contribution
+ *            right-aligned and tabular, with a hairline under every row but the
+ *            last
+ *
+ * **THERE ARE NO BARS.** Five of them down a card is a chart pretending to be a
+ * measurement, and it is the single thing that made this card read as another
+ * product's dashboard. A contribution is a NUMBER, it is printed, and the mark
+ * beside it says which way it pulls. The one measurement here is the score, and
+ * it is a ring, because there is one of it.
+ *
+ * **The card must be named by a prop.** ARIA computes no name for a
+ * `progressbar` from its contents and the ring draws a bare number, so
+ * `accessibilityLabel` is required at the type level. The ring is `stat-bar`'s,
+ * which owns the geometry and the FLAT `aria-value*` props — react-native-web
+ * drops `accessibilityValue` entirely.
+ */
+function LeadScoreCardComponent({
+  score,
+  max = 100,
+  band,
+  bandLabel,
+  accessibilityLabel,
+  valueText,
+  title = 'Lead score',
+  factors,
+  factorsLabel = 'What it is made of',
+  trend,
+  style,
+  testID,
+}: LeadScoreCardProps) {
+  const theme = useTheme();
+  const resolvedBand = band ?? resolveLeadScoreBand(score, max);
+  const bandSpec = LEAD_SCORE_BAND[resolvedBand];
+  const BandIcon = bandSpec.icon;
+  const paint = useMemo(
+    () => resolveLeadScorePaint(theme, theme.colors.card, bandSpec.tone),
+    [theme, bandSpec.tone],
+  );
+  const bandAccent = resolveAccentColors(theme.colors, bandSpec.tone, 'subtle');
+
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+  const TrendIcon = trend === undefined ? undefined : LEAD_SCORE_TREND[trend.direction].icon;
+
+  return (
+    <SurfaceLevelProvider level={1} fill={paint.surface}>
+      <Card
+        variant="outlined"
+        radius="radius-20"
+        style={[
+          {
+            paddingTop: LEAD_SCORE_CARD_PADDING,
+            paddingBottom: LEAD_SCORE_CARD_PADDING,
+            paddingLeft: LEAD_SCORE_CARD_PADDING,
+            paddingRight: LEAD_SCORE_CARD_PADDING,
+            gap: LEAD_SCORE_PANEL_GAP,
+            ...surfaceFillVars(paint.surface),
+          },
+          style,
+        ]}
+        testID={testID}
+      >
+        {/* The tinted panel is a SURFACE of its own: everything inside it reads
+            its text rungs off the wash, not off the card. */}
+        <SurfaceLevelProvider level={2} fill={paint.header}>
+          <View
+            testID={id('header')}
+            style={{
+              borderRadius: LEAD_SCORE_PANEL_RADIUS,
+              backgroundColor: paint.header,
+              paddingTop: LEAD_SCORE_PANEL_PADDING,
+              paddingBottom: LEAD_SCORE_PANEL_PADDING,
+              paddingLeft: LEAD_SCORE_PANEL_PADDING,
+              paddingRight: LEAD_SCORE_PANEL_PADDING,
+              gap: 12,
+              ...surfaceFillVars(paint.header),
+            }}
+          >
+            <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 8 }}>
+              <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+                <Text
+                  variant="body-medium"
+                  numberOfLines={1}
+                  style={{ color: paint.headerText.textSecondary }}
+                  testID={id('title')}
+                >
+                  {title}
+                </Text>
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <BandIcon width={20} height={20} fill={bandAccent.foreground} />
+                  <Text
+                    variant="title-1-medium"
+                    numberOfLines={1}
+                    style={{ flexShrink: 1, color: paint.headerText.text }}
+                    testID={id('band')}
+                  >
+                    {bandLabel ?? bandSpec.label}
+                  </Text>
+                </View>
+                {trend && TrendIcon ? (
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                    <TrendIcon width={16} height={16} fill={paint.headerText.textSecondary} />
+                    <Text
+                      variant="body-2-regular"
+                      numberOfLines={1}
+                      style={{ flexShrink: 1, color: paint.headerText.textSecondary }}
+                      testID={id('trend')}
+                    >
+                      {trend.label}
+                    </Text>
+                  </View>
+                ) : null}
+              </View>
+            </View>
+
+            <View style={{ alignItems: 'center' }}>
+              <MeterRing
+                value={score}
+                max={max}
+                size={LEAD_SCORE_RING_SIZE}
+                thickness={LEAD_SCORE_RING_THICKNESS}
+                fill={paint.fill}
+                track={paint.track}
+                accessibilityLabel={accessibilityLabel}
+                valueText={valueText}
+                testID={id('ring')}
+              >
+                <Text
+                  variant="display-4-medium"
+                  style={[{ color: paint.headerText.text }, TABULAR]}
+                  testID={id('score')}
+                >
+                  {String(score)}
+                </Text>
+              </MeterRing>
+            </View>
+          </View>
+        </SurfaceLevelProvider>
+
+        {factors?.length ? (
+          <SurfaceLevelProvider level={2} fill={paint.panel}>
+            <View
+              testID={id('factors')}
+              style={{
+                borderRadius: LEAD_SCORE_PANEL_RADIUS,
+                backgroundColor: paint.panel,
+                // Padded on the LEFT only, so every rule runs to the panel's
+                // right edge and stays inset on the left.
+                paddingLeft: LEAD_SCORE_PANEL_PADDING,
+                ...surfaceFillVars(paint.panel),
+              }}
+            >
+              {factorsLabel ? (
+                <Text
+                  variant="body-2-medium"
+                  numberOfLines={1}
+                  style={{
+                    color: paint.panelText.textSecondary,
+                    paddingTop: LEAD_FACTOR_ROW_PADDING,
+                    paddingBottom: LEAD_FACTOR_ROW_PADDING,
+                    paddingRight: LEAD_SCORE_PANEL_PADDING,
+                    borderBottomWidth: 1,
+                    borderBottomColor: paint.rowRule,
+                  }}
+                  testID={id('factors-label')}
+                >
+                  {factorsLabel}
+                </Text>
+              ) : null}
+              {factors.map((factor, index) => {
+                const positive = factor.contribution >= 0;
+                const points = formatContribution(factor.contribution);
+                const key = factor.id ?? factor.label;
+                return (
+                  <View
+                    key={key}
+                    testID={testID ? `${testID}-factor-${key}` : undefined}
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      gap: 8,
+                      paddingTop: LEAD_FACTOR_ROW_PADDING,
+                      paddingBottom: LEAD_FACTOR_ROW_PADDING,
+                      paddingRight: LEAD_SCORE_PANEL_PADDING,
+                      borderBottomWidth: index < factors.length - 1 ? 1 : 0,
+                      borderBottomColor: paint.rowRule,
+                    }}
+                  >
+                    <View
+                      style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 8,
+                        flexShrink: 1,
+                        minWidth: 0,
+                      }}
+                    >
+                      {/* The mark is the only thing carrying the sign
+                          graphically: the accent for a factor that pushes the
+                          score up, the quiet graphical neutral for one that
+                          pulls it down. */}
+                      <View
+                        style={{
+                          width: LEAD_FACTOR_MARK_SIZE,
+                          height: LEAD_FACTOR_MARK_SIZE,
+                          flexShrink: 0,
+                          borderRadius: LEAD_FACTOR_MARK_RADIUS,
+                          backgroundColor: positive ? paint.fill : paint.negativeMark,
+                        }}
+                        testID={testID ? `${testID}-factor-${key}-mark` : undefined}
+                      />
+                      <Text
+                        variant="body-regular"
+                        numberOfLines={1}
+                        style={{ flexShrink: 1, color: paint.panelText.textSecondary }}
+                      >
+                        {factorLine(factor.label, factor.detail)}
+                      </Text>
+                    </View>
+                    <Text
+                      variant="body-medium"
+                      numberOfLines={1}
+                      style={[{ flexShrink: 0, color: paint.panelText.text }, TABULAR]}
+                      testID={testID ? `${testID}-factor-${key}-points` : undefined}
+                    >
+                      {points}
+                    </Text>
+                  </View>
+                );
+              })}
+            </View>
+          </SurfaceLevelProvider>
+        ) : null}
+      </Card>
+    </SurfaceLevelProvider>
+  );
+}
+
+export const LeadScoreCard = memo(LeadScoreCardComponent);
+LeadScoreCard.displayName = 'LeadScoreCard';

package/src/lead-score/constants.ts

@@ -0,0 +1,81 @@
+import type { TextStyle } from 'react-native';
+
+import { RADIUS } from '../design-tokens/scales';
+import { RiArrowDownLine } from '../icons/remix/RiArrowDownLine';
+import { RiArrowUpLine } from '../icons/remix/RiArrowUpLine';
+import { RiFireLine } from '../icons/remix/RiFireLine';
+import { RiSnowflakeLine } from '../icons/remix/RiSnowflakeLine';
+import { RiSubtractLine } from '../icons/remix/RiSubtractLine';
+import { RiTempHotLine } from '../icons/remix/RiTempHotLine';
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { AccentTone } from '../theme/accent-colors';
+import type { LeadScoreBand, LeadScoreTrend } from './types';
+
+/**
+ * The band's tone, word and glyph.
+ *
+ * The tone paints the HEADER PANEL — the wash the label, the verdict and the
+ * ring sit on — and the band's glyph. The verdict word beside it is
+ * `title-1-medium` in the reading colour of that wash, the way every Bloom
+ * score card draws a verdict, and the ring is the accent, because that is what
+ * a meter means.
+ *
+ * `hot` is the SUCCESS tone, not the error one: a hot lead is the good outcome,
+ * and reading temperature as danger is exactly the confusion a tone vocabulary
+ * exists to prevent.
+ */
+export const LEAD_SCORE_BAND: Record<
+  LeadScoreBand,
+  { tone: AccentTone; label: string; icon: BloomIconComponent }
+> = {
+  cold: { tone: 'info', label: 'Cold', icon: RiSnowflakeLine },
+  warm: { tone: 'warning', label: 'Warm', icon: RiTempHotLine },
+  hot: { tone: 'success', label: 'Hot', icon: RiFireLine },
+};
+
+/**
+ * Where one band ends and the next begins, as a FRACTION of `max` — so a
+ * 0–100 score and a 0–5 one land in the same places. An app with its own
+ * thresholds passes `band` and skips this entirely.
+ */
+export const LEAD_SCORE_THRESHOLDS = { warm: 0.4, hot: 0.7 } as const;
+
+/**
+ * The trend arrow's glyph, per direction.
+ *
+ * A glyph and no tone: the trend is a quiet icon-and-label line under the
+ * verdict. The ARROW carries the direction, and the card keeps one tinted
+ * thing — the header wash — rather than three competing ones.
+ */
+export const LEAD_SCORE_TREND: Record<LeadScoreTrend['direction'], { icon: BloomIconComponent }> = {
+  up: { icon: RiArrowUpLine },
+  down: { icon: RiArrowDownLine },
+  flat: { icon: RiSubtractLine },
+};
+
+/**
+ * Ring geometry: 132 across with a 10 stroke, CENTRED in the header panel.
+ *
+ * It is the largest thing on the card on purpose. At 72 beside the verdict it
+ * was a widget in a corner, and the number inside it — the one fact the card
+ * exists to state — was smaller than the word next to it.
+ */
+export const LEAD_SCORE_RING_SIZE = 132;
+export const LEAD_SCORE_RING_THICKNESS = 10;
+
+/** The card's inset, and the gap between its two panels. */
+export const LEAD_SCORE_CARD_PADDING = 10;
+export const LEAD_SCORE_PANEL_GAP = 10;
+
+/** Both panels: the tinted header and the neutral one under it. */
+export const LEAD_SCORE_PANEL_RADIUS = RADIUS['radius-16'];
+export const LEAD_SCORE_PANEL_PADDING = 16;
+
+/** One factor row: 12 of air above and below its single line. */
+export const LEAD_FACTOR_ROW_PADDING = 12;
+/** The square mark at the head of a factor row. */
+export const LEAD_FACTOR_MARK_SIZE = 10;
+export const LEAD_FACTOR_MARK_RADIUS = RADIUS['radius-4'];
+
+/** Figures line up column-wise, so every number here is tabular. */
+export const TABULAR: TextStyle = { fontVariant: ['tabular-nums'] };

package/src/lead-score/index.ts

@@ -0,0 +1,28 @@
+export { LeadScoreCard } from './LeadScoreCard';
+export {
+  LEAD_FACTOR_MARK_RADIUS,
+  LEAD_FACTOR_MARK_SIZE,
+  LEAD_FACTOR_ROW_PADDING,
+  LEAD_SCORE_BAND,
+  LEAD_SCORE_CARD_PADDING,
+  LEAD_SCORE_PANEL_GAP,
+  LEAD_SCORE_PANEL_PADDING,
+  LEAD_SCORE_PANEL_RADIUS,
+  LEAD_SCORE_RING_SIZE,
+  LEAD_SCORE_RING_THICKNESS,
+  LEAD_SCORE_THRESHOLDS,
+  LEAD_SCORE_TREND,
+} from './constants';
+export {
+  factorLine,
+  formatContribution,
+  resolveLeadScoreBand,
+  resolveLeadScorePaint,
+} from './shared';
+export type { LeadScorePaint } from './shared';
+export type {
+  LeadScoreBand,
+  LeadScoreCardProps,
+  LeadScoreFactor,
+  LeadScoreTrend,
+} from './types';

package/src/lead-score/shared.ts

@@ -0,0 +1,138 @@
+/**
+ * The pure half of `LeadScoreCard`: which band a score falls in, how a signed
+ * contribution reads, and what the card's two panels are painted with.
+ *
+ * Pure so the suite can walk the boundaries without rendering — a band that
+ * flips one point early is invisible in a screenshot and obvious in a table.
+ */
+import { resolveMeterColors } from '../stat-bar/shared';
+import { mixColors } from '../styles/color-contrast';
+import {
+  hairlineOn,
+  surfaceFillOn,
+  surfaceTextOn,
+  type SurfaceTextPaint,
+} from '../styles/surface-levels';
+import { resolveAccentColors, type AccentTone } from '../theme/accent-colors';
+import { parseRgba } from '../theme/color-utils';
+import type { Theme } from '../theme/types';
+import { LEAD_SCORE_THRESHOLDS } from './constants';
+import type { LeadScoreBand } from './types';
+
+export interface LeadScorePaint {
+  /** The card's own fill — what both panels are stepped off. */
+  surface: string;
+  /**
+   * The TINTED header panel: the band tone's subtle member from
+   * `resolveAccentColors`, FLATTENED over the card behind it. Never the fill
+   * colour with an alpha appended to it — react-native-web reads that back as
+   * fully opaque (`docs/badge.mdx`).
+   */
+  header: string;
+  /** The neutral panel under it, one surface step off the card. */
+  panel: string;
+  /** The rule between two factor rows, read off the panel it divides. */
+  rowRule: string;
+  /**
+   * The ring's unearned arc. Read off the HEADER, not from `stat-bar`'s
+   * default rail: that rail is a neutral computed for the page, and on a tinted
+   * panel it reads as a foreign grey ring rather than as the empty part of this
+   * one.
+   */
+  track: string;
+  /**
+   * The earned arc, and a positive factor's mark: `stat-bar`'s own accent, so
+   * this card's measurement is the same object as every other measurement in
+   * the library. A status colour says something else — a green ring claims
+   * "healthy", which is not the claim "82 of 100" makes.
+   */
+  fill: string;
+  /**
+   * A negative factor's mark: the quiet graphical rung read off the PANEL it is
+   * drawn on, so it clears that fill at 3:1 rather than being a ramp stop
+   * picked by eye. `chart-cards`' `neutralSeries` is the obvious candidate and
+   * is the wrong one — it is `neutral-800` in dark, which is the panel's own
+   * neighbourhood, and the mark would disappear.
+   */
+  negativeMark: string;
+  /** Text rungs on the tinted header. */
+  headerText: SurfaceTextPaint;
+  /** Text rungs on the neutral panel. They are NOT the header's. */
+  panelText: SurfaceTextPaint;
+}
+
+/**
+ * A translucent token as it is actually PAINTED: composited over the fill
+ * behind it.
+ *
+ * The `*Subtle` members are `rgba()` on purpose — a tint IS an alpha of a fill
+ * — and painting one renders correctly. What does NOT work is DERIVING off it:
+ * every reader in `styles/color-contrast.ts` treats a colour as opaque, so a
+ * text rung or a hairline read from `rgba(16 185 129 / 0.24)` is computed
+ * against solid emerald and lands on a panel that is nothing like it. Measured
+ * on this card before it was flattened: the header's secondary label came back
+ * at 1.96:1 against its own panel in dark mode.
+ *
+ * So the tint is composited ONCE, here, and the flattened colour is what the
+ * panel paints and what every rung is read off — the two can then never
+ * disagree. This is parse-and-re-emit, not concatenation, and it is the same
+ * move `chip/hue-colors.ts` makes for a translucent hue.
+ */
+export function flattenOver(parent: string, translucent: string): string {
+  const top = parseRgba(translucent);
+  if (top === null) return translucent;
+  return mixColors(parent, `rgb(${top.r} ${top.g} ${top.b})`, top.a);
+}
+
+export function resolveLeadScorePaint(
+  theme: Theme,
+  surface: string,
+  tone: AccentTone,
+): LeadScorePaint {
+  const header = flattenOver(surface, resolveAccentColors(theme.colors, tone, 'subtle').background);
+  const panel = surfaceFillOn(theme, surface);
+  return {
+    surface,
+    header,
+    panel,
+    rowRule: hairlineOn(theme, panel),
+    track: hairlineOn(theme, header),
+    fill: resolveMeterColors(theme).fill,
+    negativeMark: surfaceTextOn(theme, panel).textGraphical,
+    headerText: surfaceTextOn(theme, header),
+    panelText: surfaceTextOn(theme, panel),
+  };
+}
+
+/**
+ * The band a score falls in, by FRACTION of the scale. The boundaries are
+ * inclusive upward: exactly 0.4 is warm and exactly 0.7 is hot, so a score
+ * sitting on a threshold reads as having reached it.
+ *
+ * A non-positive `max` has no scale to divide, so the score is `cold` rather
+ * than `NaN` — a card that renders is better than one that throws over data it
+ * did not choose.
+ */
+export function resolveLeadScoreBand(score: number, max: number): LeadScoreBand {
+  if (!(max > 0) || Number.isNaN(score)) return 'cold';
+  const fraction = Math.min(Math.max(score / max, 0), 1);
+  if (fraction >= LEAD_SCORE_THRESHOLDS.hot) return 'hot';
+  if (fraction >= LEAD_SCORE_THRESHOLDS.warm) return 'warm';
+  return 'cold';
+}
+
+/** A signed contribution as it is drawn and announced: `+12`, `-6`, `0`. */
+export function formatContribution(contribution: number): string {
+  return contribution > 0 ? `+${contribution}` : String(contribution);
+}
+
+/**
+ * The row's reading line: the label, and the detail after it when there is one.
+ *
+ * One string rather than two nodes, because the row truncates as a SENTENCE —
+ * two independently shrinking texts drop the label to "Fits the ide…" while the
+ * detail beside it still has room.
+ */
+export function factorLine(label: string, detail?: string): string {
+  return detail === undefined || detail === '' ? label : `${label}: ${detail}`;
+}

package/src/lead-score/types.ts

@@ -0,0 +1,61 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * How good the lead is, as a BAND rather than a colour. The tone each band
+ * draws in lives in `constants.ts`, so a card never names a red or a blue and
+ * the band survives every preset and both modes.
+ */
+export type LeadScoreBand = 'cold' | 'warm' | 'hot';
+
+/** One thing the score is made of, positive or negative. */
+export interface LeadScoreFactor {
+  /** Stable key. Defaults to the label. */
+  id?: string;
+  label: string;
+  /**
+   * SIGNED points. A positive factor pushes the score up and draws in the
+   * positive tone; a negative one pulls it down and draws in the negative tone.
+   * Zero is drawn as an empty bar rather than hidden — "this counted for
+   * nothing" is a fact about the lead.
+   */
+  contribution: number;
+  /** A quiet line under the label — "Opened 4 of 5 emails". */
+  detail?: string;
+}
+
+/** Which way the score moved against the period before this one. */
+export interface LeadScoreTrend {
+  /** PRE-FORMATTED ("+8 vs last week"). The card does no arithmetic. */
+  label: string;
+  direction: 'up' | 'down' | 'flat';
+}
+
+export interface LeadScoreCardProps {
+  score: number;
+  /** The full scale. Default 100. */
+  max?: number;
+  /** Overrides the band the score falls in — for an app with its own thresholds. */
+  band?: LeadScoreBand;
+  /** Overrides the band's own word. */
+  bandLabel?: string;
+  /**
+   * REQUIRED. The ring draws a number and names no subject, and no amount of
+   * content names a `progressbar` — so without this the card announces
+   * "progress bar, 72%" and never says whose lead it is.
+   */
+  accessibilityLabel: string;
+  /**
+   * `aria-valuetext` — the reading a screen reader says instead of the raw
+   * number ("72 of 100, hot"), which is otherwise announced as a percentage.
+   */
+  valueText?: string;
+  /** The heading over the ring. Default `"Lead score"`. */
+  title?: string;
+  /** What the score is made of. */
+  factors?: readonly LeadScoreFactor[];
+  /** The heading over the factors. Default `"What it is made of"`. */
+  factorsLabel?: string;
+  trend?: LeadScoreTrend;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/link-preview/LinkPreviewCard.tsx

@@ -99,7 +99,7 @@ const LinkPreviewCardComponent: React.FC<LinkPreviewCardProps> = ({
 
   return (
     <Card
-      variant="outlined"
+      appearance="outline"
       radius="radius-20"
       className={className}
       style={style}

package/src/list/VirtualList.tsx

@@ -19,7 +19,9 @@
  * an identical, generic, strongly-typed surface.
  */
 import * as React from 'react';
-import { FlatList, type ListRenderItemInfo } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { useScreenScroll } from '../screen/use-screen-scroll';
+import { FlatList, StyleSheet, type ListRenderItemInfo } from 'react-native';
 
 import type {
   VirtualListHandle,
@@ -27,13 +29,15 @@ import type {
   VirtualListSlot,
 } from './types';
 
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as unknown as typeof FlatList;
+
 function renderSlot(slot: VirtualListSlot): React.ReactElement | null {
   if (!slot) return null;
   return typeof slot === 'function' ? slot() : slot;
 }
 
 function VirtualListNativeInner<T>(
-  props: VirtualListProps<T>,
+  props: VirtualListProps<T> & { screenBinding?: ReturnType<typeof useScreenScroll> },
   ref: React.ForwardedRef<VirtualListHandle>,
 ) {
   const {
@@ -82,7 +86,7 @@ function VirtualListNativeInner<T>(
   );
 
   return (
-    <FlatList<T>
+    <AnimatedFlatList<T>
       ref={listRef}
       data={data ?? undefined}
       renderItem={renderFlatItem}
@@ -91,6 +95,8 @@ function VirtualListNativeInner<T>(
       ListEmptyComponent={renderSlot(ListEmptyComponent)}
       ListFooterComponent={renderSlot(ListFooterComponent)}
       style={style}
+      onScroll={props.screenBinding?.onScroll}
+      scrollEventThrottle={16}
       contentContainerStyle={contentContainerStyle}
       onEndReached={onEndReached ? () => onEndReached() : undefined}
       onEndReachedThreshold={onEndReachedThreshold}
@@ -105,10 +111,14 @@ function VirtualListNativeInner<T>(
   );
 }
 
-const VirtualList = React.forwardRef(VirtualListNativeInner) as <T>(
-  props: VirtualListProps<T> & { ref?: React.Ref<VirtualListHandle> },
-) => React.ReactElement;
-
+const PlainVirtualList = React.forwardRef(VirtualListNativeInner) as <T>(props: VirtualListProps<T> & { screenBinding?: ReturnType<typeof useScreenScroll>; ref?: React.Ref<VirtualListHandle> }) => React.ReactElement;
+function ScreenVirtualList<T>({ forwardedRef, ...props }: VirtualListProps<T> & { forwardedRef: React.ForwardedRef<VirtualListHandle> }) {
+  const binding = useScreenScroll(props.screen);
+  const padding = StyleSheet.flatten(props.contentContainerStyle);
+  return <PlainVirtualList {...props} ref={forwardedRef} screenBinding={binding} style={[props.style, props.screen?.restoration?.restorePending ? { opacity: 0 } : null]} contentContainerStyle={[props.contentContainerStyle, { paddingTop: binding.contentInsets.top + Number(padding?.paddingTop ?? padding?.padding ?? 0), paddingBottom: binding.contentInsets.bottom + Number(padding?.paddingBottom ?? padding?.padding ?? 0) }]} />;
+}
+const VirtualList = React.forwardRef(function VirtualList<T>(props: VirtualListProps<T>, ref: React.ForwardedRef<VirtualListHandle>) {
+  return props.screen ? <ScreenVirtualList {...props} forwardedRef={ref} /> : <PlainVirtualList {...props} ref={ref} />;
+}) as <T>(props: VirtualListProps<T> & { ref?: React.Ref<VirtualListHandle> }) => React.ReactElement;
 export default VirtualList;
-
 export { VirtualList };