pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/button-group/MODULE.md

@@ -1,12 +1,13 @@
 # button-group/ — a segmented single-choice control
 
-Visually connected segments sharing one outer border and a divider line between adjacent
-segments — NOT a row of standalone `Button`s. One component owns the whole group, same shape as
-`radio-group/`: each segment carries its own `accessibilityRole="radio"`; the container carries
-`accessibilityRole="radiogroup"` so assistive tech announces the grouping without collapsing the
-individually-focusable segments into one. The border/divider is drawn PER SEGMENT (never once on
-the container) so it can be selectively omitted where it touches the selected segment — see
-**1.4.11** below.
+Segments sit on one shared tonal container fill (`bg.raised`) with a hairline divider between
+adjacent unselected segments — NOT a row of standalone `Button`s. One component owns the whole
+group, same shape as `radio-group/`: each segment carries its own `accessibilityRole="radio"`; the
+container carries `accessibilityRole="radiogroup"` so assistive tech announces the grouping without
+collapsing the individually-focusable segments into one. The divider is drawn PER SEGMENT (never
+once on the container) so it can be selectively omitted where it touches the selected segment — see
+**1.4.11** below. There is no outer frame border any more (Wave 5 tonal restyle) — the container's
+own fill carries the group's shape.
 
 ## Files
 
@@ -65,18 +66,12 @@ appearances. The selected fill is always `accent.solid`; the shared outline/divi
   canvas (resting) and `bg.sunken` (pressed) — NOT `bg.hover`, whose saturated mid-tone was measured
   to drop the brand-tinted label below 4.5:1 on several brands, the same class of bug Button's
   "neutral" tone and RadioGroup's pressed row document fixing the same way.
-- **1.4.11** — the shared `outline` token (`border.interactive`) clears 3:1 against `bg.canvas` on
-  every brand × mode, but measured against a SELECTED segment's `accent.solid` fill it FAILS 3:1 on
-  15 of 16 brand × mode combinations (some catastrophically: slate light 1.00, emerald light 1.02).
-  Because `value` is required, some segment is always selected — that adjacency is every render, not
-  an edge case, and it previously went unmeasured (the shipped test only checked outline-vs-canvas).
-  Fixed: `resolveButtonGroupSegmentEdgeColors` computes, per edge of per segment, whether that edge
-  touches the selected segment; any edge that does gets `transparent` instead of `outline`, and the
-  boundary there is served instead by the selected fill's own contrast against the canvas —
-  `accent.solid` clears 3:1 against `bg.canvas` on all 16 brand × mode combinations (worst case
-  3.24:1, emerald light) — the same mechanism every other solid-fill component in this library
-  already relies on. `ButtonGroup.test.ts` measures every actually-rendered boundary pairing (not
-  just the easy outline-vs-canvas one) for first/middle/last selected × all 8 brands × both modes.
+- **1.4.11** — the shared `outline` token (`border.interactive`) is now only ever drawn as the
+  divider between two adjacent unselected segments; any edge touching the selected segment gets
+  `transparent` instead, and the boundary there is served by `accent.solid` (`selectedFill`) against
+  the group's own `containerFill` (`bg.raised`) — measured ≥ 3:1 on all 16 brand × mode combinations
+  (worst case 3.31:1, rosewood light). `ButtonGroup.test.ts` measures every actually-rendered
+  boundary for first/middle/last selected × all 8 brands × both modes.
 - **2.1.1 (keyboard) — roving tabindex.** `accessibilityRole="radio"` per segment means ARIA requires
   the group to be ONE tab stop whose arrows both move and select. `tabIndex` is `0` on exactly one
   segment and `-1` on the rest; arrows move and select (wrapping), Home/End jump to the ends
@@ -92,8 +87,8 @@ appearances. The selected fill is always `accent.solid`; the shared outline/divi
   offsets inside the segment instead; `ButtonGroup.render.test.tsx` asserts both halves — that the
   container really clips, and that every ring edge is a positive inset that therefore survives it.
   Segments also carry `focusable={!disabled}`, since RN's `Pressable` stays focusable when disabled.
-- **2.3.3** — n/a: nothing here animates. Selection is a conditional fill (not a slide or a fade), so
-  there is no transition for `useReducedMotion` to gate — same as `RadioGroup`.
+- **2.3.3** — n/a for selection (conditional fill, not a slide). Segment presses use `usePressState`
+  (scale + state-layer overlay), which snaps under reduce motion — same gating as `Button`.
 - Disabled segments are exempt from the contrast minimum (WCAG 1.4.3), so the uniform `opacity: 0.5`
   dim is correct, same as Button/RadioGroup.
 
@@ -105,15 +100,12 @@ appearances. The selected fill is always `accent.solid`; the shared outline/divi
    and — per edge, per segment — `outline` vs `transparent`) is resolved by `resolveButtonGroupColors`
    / `resolveButtonGroupSegmentEdgeColors` from role tokens and applied inline over the structural
    style.
-2. **One connected control, not N buttons — and the border lives on the segments, not the container.**
-   The container is only a clipping rect (`overflow: 'hidden'` + `borderRadius`, no border of its
-   own): it clips a filled end segment's square corner into the shared rounded shape. Every segment
-   structurally carries its own top/bottom/right border; the right one is the divider on every
-   segment except the last, where it is instead that segment's own outer right edge; only the FIRST
-   segment gets a left border + left-corner radii, only the LAST gets right-corner radii. A single
-   container-wide border could never be selectively omitted per segment (one colour for its whole
-   perimeter), which is exactly why 1.4.11 shipped broken the first time — moving the border onto the
-   segments is what makes the WCAG fix possible at all.
+2. **One connected control, not N buttons — the divider lives on the segments, the shape on the
+   container.** The container clips (`overflow: 'hidden'` + `borderRadius`) AND carries the tonal
+   `containerFill`; it clips a filled end segment's square corner into the shared rounded shape.
+   Every segment but the last structurally carries its own right border, the divider between it and
+   its neighbour; a single container-wide border could never be selectively omitted per segment (one
+   colour for its whole perimeter), which is why the divider still lives on the segments.
 3. **Pure, testable resolvers** in `ButtonGroup.variants.ts` (no React) so the WCAG + behaviour
    contract is unit-tested against the real palettes — never eyeballed.
 4. **No `{...rest}`, `style` once on the outermost node**, no icon (per spec), no import from
@@ -148,6 +140,9 @@ an `if (dark)` branch. Worst case now 3.08:1 (rosewood light); the unselected la
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — renamed to `ButtonGroupImpl` internally, exported as `ButtonGroup = memo(ButtonGroupImpl)`. The `options.map()` hands every per-row prop to host elements (`Pressable`/`Text`/`View`), never a library child component, so no `useCallback`/`useMemo` was needed.
 
+Android segments carry `android_ripple` (mirrors Button/RadioGroup), gated off while
+`disabled || selected` since a selected segment already reads via its fill.
+
 ## Modernization (v1.0.7)
 
 - Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.

package/lib/module/modules/card/Card.js

@@ -1,42 +1,140 @@
 "use strict";
 
 /**
- * Card — a plain container for grouping content. No interaction, no text of its own: `children` is
- * ordinary composition (a consumer places `Text`, `Button`, whatever it needs inside), so there is
- * nothing here for `accessibilityRole` to announce — the container is intentionally invisible to
- * assistive tech and its children carry their own semantics, exactly like a plain `View` would.
+ * Card — a plain container for grouping content, optionally pressable. When `onPress` is absent the
+ * root is a plain `View` with no press hook or animated values. Children carry their own semantics.
  */
 
-import { memo, useMemo } from "react";
-import { View } from "react-native";
+import { memo, useCallback, useMemo } from "react";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { elevation, floatingBackground, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { cardStructure, resolveCardVariant } from "./Card.variants.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function CardImpl({
-  variant = "elevated",
-  children,
-  style,
-  testID
-}) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function useCardStyles(variant, style) {
   const theme = useTheme();
-  const rootStyle = useMemo(() => {
+  return useMemo(() => {
     const variantColors = resolveCardVariant(theme.colors, variant);
+    const elevated = variant === "elevated";
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.sm);
+    const elevatedBg = elevated ? floatingBackground(theme, "sm") : variantColors.background;
     return [cardStructure(theme, {
       variant
     }), {
-      backgroundColor: variantColors.background
+      backgroundColor: elevatedBg,
+      borderCurve: "continuous"
     }, variantColors.border !== undefined && {
       borderColor: variantColors.border
-    }, variant === "elevated" && theme.elevation.md, style];
+    }, elevated && floatingSurfaceStyle(theme, "sm"), style];
   }, [theme, variant, style]);
+}
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+function StaticCard({
+  variant,
+  children,
+  style,
+  testID
+}) {
+  const rootStyle = useCardStyles(variant, style);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     style: rootStyle,
     children: children
   });
 }
-
-// A consumer's screen re-renders far more often than Card's own props change — memo is near-free
-// insurance for a design-system primitive (see CLAUDE.md "Performance" section).
+function PressableCard({
+  variant,
+  children,
+  style,
+  testID,
+  onPress,
+  onLongPress,
+  disabled = false
+}) {
+  const theme = useTheme();
+  const blocked = disabled;
+  const press = usePressState(blocked);
+  const rootStyle = useCardStyles(variant, style);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.lg]);
+  const handlePressOut = useCallback(() => {
+    press.handlers.onPressOut();
+  }, [press.handlers]);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android" || blocked) return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: false
+    };
+  }, [blocked, theme.mode]);
+  return /*#__PURE__*/_jsx(AnimatedPressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    disabled: blocked,
+    onPress: blocked ? undefined : onPress,
+    onLongPress: blocked ? undefined : onLongPress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: handlePressOut,
+    onLayout: press.onLayout,
+    android_ripple: androidRipple,
+    style: [rootStyle, press.animatedStyle, blocked && styles.dimmed, {
+      overflow: "hidden"
+    }],
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.rippleClip,
+      pointerEvents: "box-none",
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        testID: testID === undefined ? undefined : `${testID}-press-overlay`,
+        style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      }), children]
+    })
+  });
+}
+function CardImpl({
+  variant = "elevated",
+  children,
+  onPress,
+  onLongPress,
+  disabled = false,
+  style,
+  testID
+}) {
+  if (onPress === undefined) {
+    return /*#__PURE__*/_jsx(StaticCard, {
+      variant: variant,
+      style: style,
+      testID: testID,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(PressableCard, {
+    variant: variant,
+    style: style,
+    testID: testID,
+    onPress: onPress,
+    onLongPress: onLongPress,
+    disabled: disabled,
+    children: children
+  });
+}
+const styles = StyleSheet.create({
+  dimmed: {
+    opacity: 0.5
+  },
+  rippleClip: {
+    flex: 1,
+    overflow: "hidden",
+    borderRadius: 0
+  }
+});
 export const Card = /*#__PURE__*/memo(CardImpl);
 //# sourceMappingURL=Card.js.map

package/lib/module/modules/card/Card.variants.js

@@ -53,6 +53,7 @@ export function resolveCardVariant(colors, variant) {
 export const cardStructure = createThemedVariants(theme => ({
   base: {
     borderRadius: theme.radii.lg,
+    borderCurve: "continuous",
     padding: theme.space[4]
   },
   variants: {

package/lib/module/modules/card/MODULE.md

@@ -1,13 +1,15 @@
 # card/ — a plain, variant-driven container
 
 `Card` groups content with a themed background, optional border, and optional elevation. It takes
-no icon, no press handler, and renders no text of its own — `children` is ordinary composition.
+no icon and renders no text of its own — `children` is ordinary composition. When `onPress` is
+provided the root becomes a pressable surface with scale + state-layer feedback; otherwise it stays
+a plain `View` with no press hook.
 
 ## Files
 
 | File | Role |
 |------|------|
-| `Card.tsx` | The component. Resolves the variant's colours + elevation, applies them inline over the structural style, in that order, `style` last. |
+| `Card.tsx` | The component. Resolves variant colours + `floatingSurfaceStyle` for `elevated`, applies inline over structure, `style` last. |
 | `Card.variants.ts` | Pure resolver (`resolveCardVariant`) + the themed structural variant resolver `cardStructure`. No React. |
 | `index.ts` | Public surface: `Card`, `CardProps`, `CardVariant`. |
 | `__tests__/Card.test.ts` | Pure: WCAG 1.4.11 (outline border, all brands × modes) + variant→colour resolution. |
@@ -18,6 +20,9 @@ no icon, no press handler, and renders no text of its own — `children` is ordi
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `variant` | `elevated \| outline \| flat` | `elevated` | Closed union — see below. |
+| `onPress` | `() => void` | — | When set, root is `Pressable` with `usePressState` feedback. |
+| `onLongPress` | `(event) => void` | — | Only when `onPress` is set. |
+| `disabled` | `boolean` | `false` | Only when `onPress` is set. |
 | `children` | `ReactNode` | — | Ordinary composition, not a prop spread. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 | `testID` | `string` | — | Forwarded to the outermost `View`. |
@@ -28,7 +33,7 @@ no icon, no press handler, and renders no text of its own — `children` is ordi
 |---------|-----------|--------|-----------|
 | `flat` | `bg.surface` | none | none |
 | `outline` | `bg.surface` | `border.interactive`, `borderWidths.thin` | none |
-| `elevated` (default) | `bg.raised` | none | `theme.elevation.md` (already-rendered `ElevationStyle`, spread as-is — never re-derived) |
+| `elevated` (default) | `floatingBackground(sm)` in dark | none | `floatingSurfaceStyle(sm)` — `elevation` + `highlight` + `borderCurve` |
 
 Padding (`theme.space[4]`) and radius (`theme.radii.lg`) are shared across all three variants via
 `cardStructure`; only border WIDTH varies by variant there (colour is resolved separately and
@@ -49,17 +54,15 @@ edge. `elevated` additionally separates itself with a shadow, not a colour jump.
 
 ## Accessibility contract (WCAG)
 
-- **No `accessibilityRole`.** `Card` is a plain grouping container with no interaction and no text
-  of its own — there is nothing here for assistive tech to announce beyond its children, so the
-  *correct* role (rule 8) is none, exactly like an unstyled `View`. Children carry their own
-  semantics.
+- **No `accessibilityRole` when not pressable.** Plain grouping container — children carry semantics.
+  When `onPress` is set, `accessibilityRole="button"`.
 - **1.4.11** — the only rendered non-text boundary (`outline`'s border) clears ≥ 3:1 against
   `bg.canvas`, measured for all 8 brands × both modes (`Card.test.ts`).
 - **1.4.3** — N/A. Card renders no text; contrast for whatever a consumer places in `children` is
   that content's own responsibility, same as `Button.test.ts` only measures what Button itself
   renders.
-- **2.3.3 (reduced motion)** — N/A. Card has no animation.
-- **Touch target (2.5.x)** — N/A. Card is not interactive; it has no press handler to reach 44dp.
+- **2.3.3 (reduced motion)** — press feedback respects `usePressState` / `useMotion` when interactive.
+- **Touch target (2.5.x)** — N/A unless `onPress` is set; the card's padded area is the target.
 
 ## Patterns copied from `button/` (the reference module)
 
@@ -74,7 +77,7 @@ edge. `elevated` additionally separates itself with a shadow, not a colour jump.
 
 ## Known gaps
 
-None — no icon, no new theme token, no new core helper needed for this component.
+None.
 
 ## Performance
 

package/lib/module/modules/charts/BarChart.js

@@ -1,11 +1,13 @@
 "use strict";
 
 import { memo, useCallback, useMemo, useState } from "react";
-import { Pressable, StyleSheet, View } from "react-native";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
 import Svg, { Circle, Line, Path, Rect, Text as SvgText } from "react-native-svg";
+import { useDeviceTier } from "../../core/device/index.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { ChartLegend } from "./ChartLegend.js";
-import { BAR_MARKER_MIN_SPAN, BAR_MARKER_RADIUS, categoricalColorAt, defaultNumberFormatter, describeMarker, finiteOrZero, hitSlopFor, niceScale, resolveBarChartDomain, resolveBarLayout, resolveBarX, resolveChartAxisColors, scaleValue, seriesShapeAt, summarizeBarChart } from "./Charts.variants.js";
+import { BAR_MARKER_MIN_SPAN, BAR_MARKER_RADIUS, categoricalColorAt, decimateCategories, defaultNumberFormatter, describeMarker, finiteOrZero, hitSlopFor, maxRenderedCategories, niceScale, resolveBarChartDomain, resolveBarLayout, resolveBarX, resolveChartAxisColors, scaleValue, seriesShapeAt, summarizeBarChart } from "./Charts.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Y_AXIS_WIDTH = 40;
 const X_AXIS_HEIGHT = 24;
@@ -22,7 +24,8 @@ const BarPressTarget = /*#__PURE__*/memo(function BarPressTarget({
   height,
   label,
   testID,
-  onPress
+  onPress,
+  androidRipple
 }) {
   const press = useCallback(() => onPress(categoryIndex, seriesIndex), [onPress, categoryIndex, seriesIndex]);
   const box = useMemo(() => ({
@@ -30,7 +33,8 @@ const BarPressTarget = /*#__PURE__*/memo(function BarPressTarget({
     left: x,
     top,
     width,
-    height
+    height,
+    overflow: "hidden"
   }), [x, top, width, height]);
   return /*#__PURE__*/_jsx(Pressable, {
     testID: testID,
@@ -38,6 +42,7 @@ const BarPressTarget = /*#__PURE__*/memo(function BarPressTarget({
     accessibilityLabel: label,
     hitSlop: hitSlopFor(width, height),
     onPress: press,
+    android_ripple: androidRipple,
     style: box
   });
 });
@@ -57,23 +62,28 @@ export const BarChart = /*#__PURE__*/memo(function BarChart({
   const theme = useTheme();
   const axisColors = useMemo(() => resolveChartAxisColors(theme.colors), [theme.colors]);
   const [width, setWidth] = useState(0);
+  const tier = useDeviceTier();
   const onLayout = event => {
     setWidth(event.nativeEvent.layout.width);
   };
   const plotWidth = Math.max(0, width - Y_AXIS_WIDTH);
   const plotHeight = Math.max(0, height - X_AXIS_HEIGHT - PLOT_TOP);
-  const summary = useMemo(() => summarizeBarChart(data, yAxisFormatter), [data, yAxisFormatter]);
-  const seriesCount = useMemo(() => Math.max(1, data.reduce((max, datum) => Math.max(max, datum.values.length), 0)), [data]);
+
+  // An unbounded `data` array otherwise means unbounded svg nodes — one bar, one label and one
+  // press target per category. Below the cap this is the same array reference as `data` itself.
+  const renderedData = useMemo(() => decimateCategories(data, maxRenderedCategories(tier)), [data, tier]);
+  const summary = useMemo(() => summarizeBarChart(renderedData, yAxisFormatter), [renderedData, yAxisFormatter]);
+  const seriesCount = useMemo(() => Math.max(1, renderedData.reduce((max, datum) => Math.max(max, datum.values.length), 0)), [renderedData]);
   const {
     bars,
     ticks,
     categories
   } = useMemo(() => {
-    const domain = resolveBarChartDomain(data, stacked);
+    const domain = resolveBarChartDomain(renderedData, stacked);
     const scale = niceScale(domain.min, domain.max, TICK_COUNT);
-    const layout = resolveBarLayout(data.length, seriesCount, plotWidth, stacked);
+    const layout = resolveBarLayout(renderedData.length, seriesCount, plotWidth, stacked);
     const zeroY = scaleValue(0, scale.min, scale.max, plotHeight, 0);
-    const resolvedBars = data.flatMap((datum, categoryIndex) => {
+    const resolvedBars = renderedData.flatMap((datum, categoryIndex) => {
       let stackTop = 0;
       return datum.values.map((rawValue, seriesIndex) => {
         const value = finiteOrZero(rawValue);
@@ -120,16 +130,16 @@ export const BarChart = /*#__PURE__*/memo(function BarChart({
         y: PLOT_TOP + scaleValue(tick, scale.min, scale.max, plotHeight, 0),
         text: yAxisFormatter(tick)
       })),
-      categories: data.map((datum, categoryIndex) => ({
+      categories: renderedData.map((datum, categoryIndex) => ({
         x: Y_AXIS_WIDTH + categoryIndex * layout.bandWidth + layout.bandWidth / 2,
         label: datum.label
       }))
     };
-  }, [data, series, stacked, seriesCount, plotWidth, plotHeight, theme.colors, yAxisFormatter]);
+  }, [renderedData, series, stacked, seriesCount, plotWidth, plotHeight, theme.colors, yAxisFormatter]);
   const pressBar = useCallback((categoryIndex, seriesIndex) => {
-    const datum = data[categoryIndex];
+    const datum = renderedData[categoryIndex];
     if (datum !== undefined) onPressBar?.(datum, seriesIndex);
-  }, [data, onPressBar]);
+  }, [renderedData, onPressBar]);
   const legendEntries = useMemo(() => showLegend && seriesCount > 1 ? Array.from({
     length: seriesCount
   }, (_, index) => ({
@@ -140,6 +150,10 @@ export const BarChart = /*#__PURE__*/memo(function BarChart({
   const plotStyle = useMemo(() => ({
     height
   }), [height]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     style: style,
@@ -229,7 +243,8 @@ export const BarChart = /*#__PURE__*/memo(function BarChart({
           width: bar.width,
           height: bar.height,
           label: bar.label,
-          onPress: pressBar
+          onPress: pressBar,
+          androidRipple: androidRipple
         }, `press-${bar.categoryIndex}-${bar.seriesIndex}`))
       })]
     }), /*#__PURE__*/_jsx(ChartLegend, {

package/lib/module/modules/charts/BarList.js

@@ -2,8 +2,9 @@
 
 import { memo, useCallback, useMemo } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
+import { VirtualList } from "../../core/list/index.js";
 import { useTheme } from "../../theme/hooks.js";
-import { barListHeaderStructure, barListRowStructure, barListStructure, barListTrackStructure, resolveBarListColors } from "./Charts.variants.js";
+import { BAR_LIST_ROW_HEIGHT, barListHeaderStructure, barListRowStructure, barListStructure, barListTrackStructure, resolveBarListColors } from "./Charts.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function barFraction(value, max) {
   if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0;
@@ -97,25 +98,37 @@ export const BarList = /*#__PURE__*/memo(function BarList({
     const item = items[index];
     if (item !== undefined) onPressItem?.(item, index);
   }, [items, onPressItem]);
+  const contentContainerStyle = useMemo(() => barListStructure(theme), [theme]);
+  const keyExtractor = useCallback(row => row.key, []);
+  const renderItem = useCallback(({
+    item,
+    index
+  }) => /*#__PURE__*/_jsx(BarListRow, {
+    testID: testID === undefined ? undefined : `${testID}-item-${index}`,
+    index: index,
+    label: item.label,
+    value: item.value,
+    icon: item.icon,
+    fillWidth: item.fillWidth,
+    fillColor: item.fillColor,
+    trackColor: colors.track,
+    rowStyle: rowStyle,
+    headerStyle: headerStyle,
+    trackStyle: trackStyle,
+    labelTextStyle: labelTextStyle,
+    valueTextStyle: valueTextStyle,
+    onPress: onPressItem === undefined ? undefined : pressItem
+  }), [testID, colors.track, rowStyle, headerStyle, trackStyle, labelTextStyle, valueTextStyle, onPressItem, pressItem]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
-    style: [barListStructure(theme), style],
-    children: rows.map((row, index) => /*#__PURE__*/_jsx(BarListRow, {
-      testID: testID === undefined ? undefined : `${testID}-item-${index}`,
-      index: index,
-      label: row.label,
-      value: row.value,
-      icon: row.icon,
-      fillWidth: row.fillWidth,
-      fillColor: row.fillColor,
-      trackColor: colors.track,
-      rowStyle: rowStyle,
-      headerStyle: headerStyle,
-      trackStyle: trackStyle,
-      labelTextStyle: labelTextStyle,
-      valueTextStyle: valueTextStyle,
-      onPress: onPressItem === undefined ? undefined : pressItem
-    }, row.key))
+    style: style,
+    children: /*#__PURE__*/_jsx(VirtualList, {
+      data: rows,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      itemHeight: BAR_LIST_ROW_HEIGHT,
+      contentContainerStyle: contentContainerStyle
+    })
   });
 });
 const styles = StyleSheet.create({

package/lib/module/modules/charts/Charts.variants.js

@@ -7,6 +7,10 @@
 
 import { createThemedVariants } from "../../core/style/index.js";
 export const BAR_LIST_TRACK_HEIGHT = 6;
+
+/** Header text (`fontSizes.sm` line height) + row gap (`space[1]`) + track — a floor, not a hard
+ *  clip, so `VirtualList`'s `itemHeight` gets a real offset hint without constraining content. */
+export const BAR_LIST_ROW_HEIGHT = 30;
 export function resolveBarListColors(colors) {
   return {
     label: colors.fg.default,
@@ -39,7 +43,8 @@ export const barListStructure = createThemedVariants(theme => ({
 }));
 export const barListRowStructure = createThemedVariants(theme => ({
   base: {
-    rowGap: theme.space[1]
+    rowGap: theme.space[1],
+    minHeight: BAR_LIST_ROW_HEIGHT
   }
 }));
 export const barListHeaderStructure = createThemedVariants(theme => ({
@@ -242,6 +247,46 @@ export function resolveBarChartDomain(data, stacked) {
     max
   };
 }
+
+/** Per-`useDeviceTier()` cap on rendered categories — scaled down from `MAX_RENDERED_POINTS` (200)
+ *  since each `BarChart` category costs THREE svg nodes (bar, label, press target) against a line
+ *  series' one-per-sample, so the same node budget affords fewer categories on the low tiers. */
+export const MAX_RENDERED_CATEGORIES_LOW = 60;
+export const MAX_RENDERED_CATEGORIES_MID = 120;
+export const MAX_RENDERED_CATEGORIES_HIGH = 200;
+export function maxRenderedCategories(tier) {
+  switch (tier) {
+    case "low":
+      return MAX_RENDERED_CATEGORIES_LOW;
+    case "high":
+      return MAX_RENDERED_CATEGORIES_HIGH;
+    default:
+      return MAX_RENDERED_CATEGORIES_MID;
+  }
+}
+
+/**
+ * Evenly-spaced stride sampling down to `maxCategories`, first and last category always kept.
+ * Unlike `decimateSeries`' min/max bucketing (built for a numeric y-value), a category has no
+ * "extreme" to preserve — only its label and position — so an even stride keeps the *shown*
+ * categories representative of the full range instead of clustering at one end. Below the cap the
+ * input array is returned as-is (same reference), so a typical chart is byte-identical to before.
+ */
+export function decimateCategories(data, maxCategories) {
+  if (data.length <= maxCategories) return data;
+  if (maxCategories <= 1) return data.length === 0 ? [] : [data[0]];
+  const lastIndex = data.length - 1;
+  const result = [];
+  let lastPushedIndex = -1;
+  for (let i = 0; i < maxCategories; i++) {
+    const index = Math.round(i * lastIndex / (maxCategories - 1));
+    if (index !== lastPushedIndex) {
+      result.push(data[index]);
+      lastPushedIndex = index;
+    }
+  }
+  return result;
+}
 /** "Bar chart, 4 categories, highest Revenue at 1,200" — the accessibility label IS the chart for
  *  a screen reader, so it names the count and the single tallest bar drawn, across every series. */
 export function summarizeBarChart(data, formatter) {
@@ -285,9 +330,28 @@ export function resolveLineDomain(series) {
 }
 
 /** Above this sample count, line/sparkline series are decimated before any geometry is built —
- *  one svg node per sample is what makes a 5,000-point series unusable on a mid-tier phone. */
+ *  one svg node per sample is what makes a 5,000-point series unusable on a mid-tier phone. Equal
+ *  to `maxRenderedPoints("high")` — kept as a named export since it's also `decimateSeries`'
+ *  default `maxPoints`, for a caller that decimates without a device tier in hand. */
 export const MAX_RENDERED_POINTS = 200;
 
+/** Per-`useDeviceTier()` cap on rendered line/sparkline points. A point costs ONE svg node versus a
+ *  `BarChart` category's three (bar, label, press target), so the same low/mid-tier node budget
+ *  affords more points than `MAX_RENDERED_CATEGORIES` at the same tier. */
+export const MAX_RENDERED_POINTS_LOW = 80;
+export const MAX_RENDERED_POINTS_MID = 140;
+export const MAX_RENDERED_POINTS_HIGH = MAX_RENDERED_POINTS;
+export function maxRenderedPoints(tier) {
+  switch (tier) {
+    case "low":
+      return MAX_RENDERED_POINTS_LOW;
+    case "high":
+      return MAX_RENDERED_POINTS_HIGH;
+    default:
+      return MAX_RENDERED_POINTS_MID;
+  }
+}
+
 /**
  * Min/max bucket decimation down to ~`maxPoints`: both endpoints are kept, and the interior is
  * split into equal buckets that each contribute their lowest and highest sample, in original

package/lib/module/modules/charts/DonutChart.js

@@ -5,7 +5,7 @@ import { StyleSheet, Text, View } from "react-native";
 import Svg, { Circle, G } from "react-native-svg";
 import { useTheme } from "../../theme/hooks.js";
 import { ChartLegend } from "./ChartLegend.js";
-import { DONUT_SEGMENT_GAP_RATIO, resolveDonutChartColors } from "./Charts.variants.js";
+import { DONUT_SEGMENT_GAP_RATIO, resolveDonutChartColors, seriesShapeAt } from "./Charts.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DonutChart = /*#__PURE__*/memo(function DonutChart({
   segments,
@@ -53,9 +53,14 @@ export const DonutChart = /*#__PURE__*/memo(function DonutChart({
       dashoffset: -arc.start * circumference - gap / 2
     };
   }), [arcs, circumference]);
-  const legendEntries = useMemo(() => showLegend && arcs.length > 1 ? arcs.map(arc => ({
+
+  // Segment colour is consumer-supplied with no shared ramp to key off, but each segment's own
+  // position in `arcs` is stable index identity — the same thing `seriesShapeAt` already keys off
+  // for `PieChart`'s legend, reused here rather than reinvented.
+  const legendEntries = useMemo(() => showLegend && arcs.length > 1 ? arcs.map((arc, index) => ({
     color: arc.color,
-    label: arc.label
+    label: arc.label,
+    shape: seriesShapeAt(index)
   })) : [], [arcs, showLegend]);
   const ringSize = useMemo(() => ({
     width: size,
@@ -116,7 +121,7 @@ export const DonutChart = /*#__PURE__*/memo(function DonutChart({
       })]
     }), /*#__PURE__*/_jsx(ChartLegend, {
       entries: legendEntries,
-      glyph: "swatch",
+      glyph: "mark",
       testID: testID ? `${testID}-legend` : undefined
     })]
   });