pixelize-native-library 1.2.0 → 1.3.0

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,
@@ -151,8 +165,9 @@ export const BarChart = /*#__PURE__*/memo(function BarChart({
         accessible: true,
         accessibilityRole: "image",
         accessibilityLabel: summary,
-        style: StyleSheet.absoluteFill,
-        pointerEvents: "none"
+        style: [StyleSheet.absoluteFill, {
+          pointerEvents: 'none'
+        }]
       }), /*#__PURE__*/_jsx(View, {
         accessibilityElementsHidden: true,
         importantForAccessibility: "no-hide-descendants",
@@ -218,8 +233,9 @@ export const BarChart = /*#__PURE__*/memo(function BarChart({
           }, `value-${bar.categoryIndex}-${bar.seriesIndex}`))]
         })
       }), onPressBar !== undefined && /*#__PURE__*/_jsx(View, {
-        style: StyleSheet.absoluteFill,
-        pointerEvents: "box-none",
+        style: [StyleSheet.absoluteFill, {
+          pointerEvents: 'box-none'
+        }],
         children: bars.map(bar => /*#__PURE__*/_jsx(BarPressTarget, {
           testID: testID ? `${testID}-bar-${bar.categoryIndex}-${bar.seriesIndex}-press` : undefined,
           categoryIndex: bar.categoryIndex,
@@ -229,7 +245,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/BarChartProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=BarChartProps.js.map

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

@@ -2,8 +2,10 @@
 
 import { memo, useCallback, useMemo } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
+import { VirtualList } from "../../core/list/index.js";
+import { renderNodeSlot } from "../../core/slot/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;
@@ -36,7 +38,7 @@ const BarListRow = /*#__PURE__*/memo(function BarListRow({
     style: rowStyle,
     children: [/*#__PURE__*/_jsxs(View, {
       style: headerStyle,
-      children: [icon, /*#__PURE__*/_jsx(Text, {
+      children: [renderNodeSlot(icon, labelTextStyle), /*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
         style: labelTextStyle,
         children: label
@@ -97,25 +99,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/BarListProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=BarListProps.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=ChartLegendProps.js.map

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

@@ -5,8 +5,14 @@
  * (mocking only `react-native`'s `StyleSheet`, as every sibling module's tests do).
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 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 +45,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 => ({
@@ -63,7 +70,7 @@ export const barListTrackStructure = createThemedVariants(theme => ({
 // ---------------------------------------------------------------------------------------------
 
 /** Same touch-target floor as Select/Button (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
-export const CHART_MIN_TOUCH_TARGET = 44;
+export const CHART_MIN_TOUCH_TARGET = MIN_TOUCH_TARGET;
 /** Symmetric hit-area expansion so a drawn mark smaller than 44dp still meets the touch-target
  *  floor, on whichever axis is short — a thin bar and a slim pie wedge fail on different axes. */
 export function hitSlopFor(width, height, minTarget = CHART_MIN_TOUCH_TARGET) {
@@ -242,6 +249,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 +332,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,
@@ -96,8 +101,9 @@ export const DonutChart = /*#__PURE__*/memo(function DonutChart({
           })
         })
       }), (centerLabel !== undefined || centerSublabel !== undefined) && /*#__PURE__*/_jsxs(View, {
-        pointerEvents: "none",
-        style: [StyleSheet.absoluteFill, styles.center],
+        style: [StyleSheet.absoluteFill, styles.center, {
+          pointerEvents: 'none'
+        }],
         children: [centerLabel !== undefined && /*#__PURE__*/_jsx(Text, {
           numberOfLines: 1,
           style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
@@ -116,7 +122,7 @@ export const DonutChart = /*#__PURE__*/memo(function DonutChart({
       })]
     }), /*#__PURE__*/_jsx(ChartLegend, {
       entries: legendEntries,
-      glyph: "swatch",
+      glyph: "mark",
       testID: testID ? `${testID}-legend` : undefined
     })]
   });

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=DonutChartProps.js.map

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

@@ -3,9 +3,10 @@
 import { memo, useMemo, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import Svg, { Circle, Line, Path, Text as SvgText } from "react-native-svg";
+import { useDeviceTier } from "../../core/device/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { ChartLegend } from "./ChartLegend.js";
-import { buildAreaPath, buildLinePath, categoricalColorAt, decimateSeries, defaultNumberFormatter, describeMarker, niceScale, resolveChartAxisColors, resolveLineDomain, resolveSeriesPoints, scaleValue, seriesDashAt, seriesShapeAt, summarizeLineChart } from "./Charts.variants.js";
+import { buildAreaPath, buildLinePath, categoricalColorAt, decimateSeries, defaultNumberFormatter, describeMarker, maxRenderedPoints, niceScale, resolveChartAxisColors, resolveLineDomain, resolveSeriesPoints, scaleValue, seriesDashAt, seriesShapeAt, summarizeLineChart } 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;
@@ -33,6 +34,7 @@ export const LineChart = /*#__PURE__*/memo(function LineChart({
   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);
   };
@@ -40,8 +42,8 @@ export const LineChart = /*#__PURE__*/memo(function LineChart({
   const plotHeight = Math.max(0, height - X_AXIS_HEIGHT - PLOT_TOP);
   const decimatedSeries = useMemo(() => series.map(s => ({
     ...s,
-    data: decimateSeries(s.data, datumY)
-  })), [series]);
+    data: decimateSeries(s.data, datumY, maxRenderedPoints(tier))
+  })), [series, tier]);
   const {
     plotted,
     paths,
@@ -108,8 +110,9 @@ export const LineChart = /*#__PURE__*/memo(function LineChart({
         accessible: true,
         accessibilityRole: "image",
         accessibilityLabel: summary,
-        style: StyleSheet.absoluteFill,
-        pointerEvents: "none"
+        style: [StyleSheet.absoluteFill, {
+          pointerEvents: 'none'
+        }]
       }), /*#__PURE__*/_jsx(View, {
         accessibilityElementsHidden: true,
         importantForAccessibility: "no-hide-descendants",

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=LineChartProps.js.map

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

@@ -16,7 +16,7 @@ importing this subpath requires the peer installed).
 | `LineChart.tsx` | Svg multi-series line with axes/gridlines, optional area fill and curve smoothing. |
 | `PieChart.tsx` | Svg filled wedges + legend — the "with a legend" sibling to `DonutChart`'s ring. |
 | `ChartLegend.tsx` | Internal — the one text legend shared by `PieChart`/`DonutChart`/`LineChart`/`BarChart`. Not exported. |
-| `Charts.variants.ts` | Pure resolvers: colors, scales, geometry, arc/path maths, a11y summaries, non-colour series channels. No React, no svg. |
+| `Charts.variants.ts` | Pure resolvers: colors, scales, geometry, arc/path maths, a11y summaries, non-colour series channels. `CHART_MIN_TOUCH_TARGET` aliases `MIN_TOUCH_TARGET` from `core/a11y/touchTarget`; `hitSlopFor` expands marks below 44dp. No React, no svg. |
 | `__tests__/Charts.test.ts` | Pure: WCAG contrast (all brands × modes), geometry, scale, path and summary logic. |
 | `__tests__/Charts.render.test.tsx` | Render: rows/segments/paths/bars/lines, a11y, svg mocked. |
 
@@ -28,10 +28,11 @@ Bar fill defaults to `accent.solid`; per-item `color` exists for data-driven ser
 breakdowns have no closed-union role) — a deliberate, documented exception to the closed-union rule.
 
 **DonutChart** — `segments: { value, color, label? }[]`, `size?` (160), `thickness?` (20),
-`centerLabel?`, `centerSublabel?`, `showLegend?` (true — **new**), `style?`, `testID?`. Non-finite /
+`centerLabel?`, `centerSublabel?`, `showLegend?` (true), `style?`, `testID?`. Non-finite /
 ≤ 0 segment values are dropped; with no valid segments only the `bg.sunken` track ring renders.
-`segment.label` (previously accepted but silently dropped) now renders as a legend row, falling
-back to `"Segment N"` when omitted; the legend is skipped for 0–1 valid segments.
+`segment.label` renders as a legend row, falling back to `"Segment N"` when omitted; the legend is
+skipped for 0–1 valid segments. Each legend row also carries a knocked-out shape keyed off the
+segment's own index in `segments[]`, same as `PieChart`.
 
 **Sparkline** — `data: number[]`, `width?` (120), `height?` (32),
 `tone?: accent | neutral | success | warning | danger | info` (accent), `style?`, `testID?`.
@@ -40,7 +41,7 @@ Unchanged by the WCAG 1.4.1 pass below — see "Design decisions" for why.
 
 **BarChart** — `data: { label, values: number[] }[]` (`values.length === 1` = simple bars, `> 1` =
 grouped/stacked), `series?: { name, color? }[]`, `height?` (200), `showGrid?` (true), `showValues?`
-(false), `stacked?` (false), `showLegend?` (true — **new**), `yAxisFormatter?`,
+(false), `stacked?` (false), `showLegend?` (true), `yAxisFormatter?`,
 `onPressBar?(datum, seriesIndex)`, `style?`, `testID?`. Width is measured via `onLayout` (no `width`
 prop — the chart fills its container). Non-finite bar values render as height 0; the y-domain always
 includes 0. 2+ series get a legend (falling back to `"Series N"` with no `series[i].name`) and a
@@ -48,12 +49,12 @@ knocked-out shape mark on each bar when it's ≥ 14dp on both axes (`BAR_MARKER_
 
 **LineChart** — `series: { name, data: { x, y }[], color?, shape? }[]`, `height?` (200), `showGrid?`
 (true), `showDots?` (true), `showArea?` (false), `curved?` (false — Catmull-Rom→bézier when true),
-`showLegend?` (true — **new**), `yAxisFormatter?`, `xAxisFormatter?`, `style?`, `testID?`. Non-finite
+`showLegend?` (true), `yAxisFormatter?`, `xAxisFormatter?`, `style?`, `testID?`. Non-finite
 `y` samples are dropped per series (same contract as `Sparkline`), then spaced evenly by index — x is
 plotted by position, not proportionally by numeric value, so unevenly-spaced categories still read as
 an even axis. Long series are decimated first (see Performance) — no prop, a module constant. 2+
 series get a legend naming each one; every series also gets a `strokeDasharray` and a marker shape
-(circle/square/triangle/diamond/cross) by index — `series[i].shape` (**new**, optional) overrides it.
+(circle/square/triangle/diamond/cross) by index — optional `series[i].shape` overrides it.
 
 **PieChart** — `segments: { label, value, color? }[]`, `size?` (180), `showLegend?` (true),
 `showPercentages?` (true — controls the legend row text, not on-wedge labels: a label drawn on a
@@ -61,8 +62,8 @@ consumer-picked wedge color can't have its contrast guaranteed), `onPressSegment
 `style?`, `testID?`. `index` is into the rendered (filtered, positive-value) list, matching
 `DonutChart`'s own `arcs`-index convention — never the raw `segments` indices. This is the filled
 sibling of `DonutChart`; reach for `DonutChart` for a ring with a center label, `PieChart` for
-filled wedges with a legend. Wedges now carry a `bg.surface` separator stroke and the legend a
-knocked-out shape per row, on top of the pre-existing swatch+text (see "Design decisions").
+filled wedges with a legend. Wedges carry a `bg.surface` separator stroke, and each legend row a
+knocked-out shape alongside its swatch+text (see "Design decisions").
 
 All four multi-series charts default series/segment colors from a shared 5-hue role-derived ramp
 (`resolveCategoricalRamp`) when no per-series/per-segment `color` is given; a 6th+ series wraps
@@ -83,7 +84,8 @@ shape/dash channels (`seriesShapeAt`/`seriesDashAt`) wrap the same way, by the s
   `accessibilityRole="button"` + `"label, value"` label. BarList rows are `text` role, or `button`
   when `onPressItem` is set.
 - **2.5.8 / 2.5.5 (Target Size)** — every pressable bar/segment gets a ≥ 44dp touch target via
-  `hitSlop` (`hitSlopFor`), computed from its own drawn size; pie wedges use an angular
+  `hitSlop` (`hitSlopFor`, floor `CHART_MIN_TOUCH_TARGET` = `core/a11y/touchTarget`), computed from
+  its own drawn size; pie wedges use an angular
   bounding-box (`resolveWedgeBoundingBox`) since a wedge isn't rectangular.
 - **1.4.3 (Contrast Minimum, text)** — BarList label/value and axis labels (`fg.muted`) measure
   ≥ 4.5:1 against their canvas, for all 9 brands × both modes (`Charts.test.ts`).
@@ -134,8 +136,9 @@ shape/dash channels (`seriesShapeAt`/`seriesDashAt`) wrap the same way, by the s
 - Segment/bar/series `color` values come from the consumer — contrast of consumer-picked colors
   against the canvas is the consumer's to verify (documented exception to the closed-union rule).
   `DonutChart.segments[].color` is required and consumer-supplied (unlike the other three charts'
-  ramp-defaulted `color`), so it has no index identity a shape channel could hook into — its
-  separator is a track-coloured gap instead of a shape.
+  ramp-defaulted `color`); its ring separator stays a track-coloured gap (the ring segments are
+  strokes on one shared circle, not independent filled paths — see "Design decisions"); the
+  legend carries a shape per segment's own index in `segments[]`, same as `PieChart`.
 - LineChart's x-axis labels are taken from the longest (decimated) series and positioned by raw
   index; a series with dropped non-finite points can drift slightly out of alignment with the
   shared x-axis, and a decimated series labels only the samples it kept.
@@ -159,18 +162,28 @@ shape/dash channels (`seriesShapeAt`/`seriesDashAt`) wrap the same way, by the s
   styles hoisted out of the row loop; a per-row inline closure or a per-row `variants(theme)` call
   would defeat their memo. `ChartLegend`'s entry array is built inside each chart's own `useMemo`
   (keyed on `series`/`segments`/`showLegend`/`theme.colors`), never a fresh literal per render.
-- **Found, not acted on:** decimation (`MAX_RENDERED_POINTS`) is a fixed constant regardless of
-  `useDeviceTier()` — a `'low'`-tier phone gets the same 200-point cap (and the same new bar-marker/
-  legend work) as `'high'`. Worth a future device-tier-scaled pass; out of scope for this WCAG change
-  (no animation exists here for a native-driver check, and every geometry `useMemo` already keys
-  correctly).
-- **Decimation** (`LineChart`, `Sparkline`): a series longer than `MAX_RENDERED_POINTS` (200) is
+- **Android ripple** — `BarPressTarget`/`WedgePressTarget` take `android_ripple` (`borderless: false`)
+  computed once per chart (`androidRipple`, `useMemo` on `theme.mode`, `Platform.OS === "android"`
+  gated) and passed down per target, rather than re-resolved per row. Each target's absolutely
+  positioned box also gained `overflow: "hidden"` so the ripple clips to it instead of spilling past
+  the invisible press area.
+- **Decimation** (`LineChart`, `Sparkline`): a series longer than a `useDeviceTier()`-scaled
+  `maxRenderedPoints` (80/140/200, low/mid/high — `MAX_RENDERED_POINTS_HIGH` equals the pre-existing
+  fixed `MAX_RENDERED_POINTS`, still exported for a caller that decimates without a tier in hand) is
   downsampled inside the same `useMemo`, before any geometry, so it costs nothing on re-render —
   1,000 samples otherwise means 1,000 svg nodes. Min/max bucketing: both endpoints plus each
   bucket's lowest and highest sample, in original order, so a one-sample spike survives (plain
   stride sampling would drop it). Output is ≤ the threshold; below it the input array is returned
-  as-is. `BarChart` is deliberately NOT decimated — every bar is a labelled category, and dropping
-  categories would contradict the x-axis labels and the a11y summary.
+  as-is. A point costs one svg node against a `BarChart` category's three (bar, label, press
+  target), so the same per-tier node budget affords more points than categories at the same tier.
+- **`BarChart` category cap:** an unbounded `data` array otherwise means unbounded svg nodes — one
+  bar, one label and one press target per category. Above a `useDeviceTier()`-scaled
+  `maxRenderedCategories` (60/120/200, low/mid/high — same worst-case scale as `MAX_RENDERED_POINTS`),
+  `decimateCategories` stride-samples down to the cap inside the same `useMemo`, first/last category
+  always kept, so the shown categories stay spread across the full range rather than clustered at one
+  end. Below the cap the input array is returned as-is (byte-identical to the pre-cap behavior).
+- **`BarList` windowing:** rows render through `VirtualList` (`itemHeight={BAR_LIST_ROW_HEIGHT}`)
+  instead of a raw `.map()`, so an unbounded `items` array no longer mounts every row up front.
 
 ## Modernization (v1.0.7)
 

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

@@ -1,8 +1,9 @@
 "use strict";
 
 import { memo, useCallback, useMemo } from "react";
-import { Pressable, StyleSheet, View } from "react-native";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
 import Svg, { Circle, Path } from "react-native-svg";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { ChartLegend } from "./ChartLegend.js";
 import { SEGMENT_SEPARATOR_WIDTH, describeWedge, hitSlopFor, resolvePieWedges, resolveWedgeBoundingBox, seriesShapeAt, summarizePieChart } from "./Charts.variants.js";
@@ -12,7 +13,8 @@ const WedgePressTarget = /*#__PURE__*/memo(function WedgePressTarget({
   box,
   label,
   testID,
-  onPress
+  onPress,
+  androidRipple
 }) {
   const press = useCallback(() => onPress(index), [onPress, index]);
   const frame = useMemo(() => ({
@@ -20,7 +22,8 @@ const WedgePressTarget = /*#__PURE__*/memo(function WedgePressTarget({
     left: box.x,
     top: box.y,
     width: box.width,
-    height: box.height
+    height: box.height,
+    overflow: "hidden"
   }), [box]);
   return /*#__PURE__*/_jsx(Pressable, {
     testID: testID,
@@ -28,6 +31,7 @@ const WedgePressTarget = /*#__PURE__*/memo(function WedgePressTarget({
     accessibilityLabel: label,
     hitSlop: hitSlopFor(box.width, box.height),
     onPress: press,
+    android_ripple: androidRipple,
     style: frame
   });
 });
@@ -76,6 +80,10 @@ export const PieChart = /*#__PURE__*/memo(function PieChart({
     width: size,
     height: size
   }), [size]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     style: [styles.container, style],
@@ -86,8 +94,9 @@ export const PieChart = /*#__PURE__*/memo(function PieChart({
         accessible: true,
         accessibilityRole: "image",
         accessibilityLabel: summary,
-        style: StyleSheet.absoluteFill,
-        pointerEvents: "none"
+        style: [StyleSheet.absoluteFill, {
+          pointerEvents: 'none'
+        }]
       }), /*#__PURE__*/_jsx(View, {
         accessibilityElementsHidden: true,
         importantForAccessibility: "no-hide-descendants",
@@ -115,14 +124,16 @@ export const PieChart = /*#__PURE__*/memo(function PieChart({
           }, index))]
         })
       }), pressTargets.length > 0 && /*#__PURE__*/_jsx(View, {
-        style: StyleSheet.absoluteFill,
-        pointerEvents: "box-none",
+        style: [StyleSheet.absoluteFill, {
+          pointerEvents: 'box-none'
+        }],
         children: pressTargets.map((target, index) => /*#__PURE__*/_jsx(WedgePressTarget, {
           testID: testID ? `${testID}-segment-${index}-press` : undefined,
           index: index,
           box: target.box,
           label: target.label,
-          onPress: pressSegment
+          onPress: pressSegment,
+          androidRipple: androidRipple
         }, index))
       })]
     }), /*#__PURE__*/_jsx(ChartLegend, {