pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/file-grid/FileGrid.js

@@ -8,15 +8,20 @@
  */
 
 import { memo, useCallback, useMemo } from "react";
-import { Pressable, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
 import { VirtualList } from "../../core/list/index.js";
+import { concentric } from "../../core/style/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { fileGridCellStructure, fileGridRowHeight, fileGridRowStructure, resolveFileGridItemLabel } from "./FileGrid.variants.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const ICON_SIZE = 28;
 const DEFAULT_ICON = "file-text";
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 function rowKeyExtractor(row) {
   return row.key;
 }
@@ -43,12 +48,8 @@ export const FileGrid = /*#__PURE__*/memo(function FileGrid({
   const cellStyle = useMemo(() => [fileGridCellStructure(theme, {
     columns
   }), {
-    borderColor: theme.colors.border.default,
-    backgroundColor: theme.colors.bg.surface
+    backgroundColor: theme.colors.bg.raised
   }], [theme, columns]);
-  const pressedStyle = useMemo(() => ({
-    backgroundColor: theme.colors.bg.sunken
-  }), [theme]);
   const textStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
     fontSize: theme.fontSizes.sm,
     color: theme.colors.fg.default,
@@ -62,12 +63,11 @@ export const FileGrid = /*#__PURE__*/memo(function FileGrid({
     row: row,
     rowStyle: rowStyle,
     cellStyle: cellStyle,
-    pressedStyle: pressedStyle,
     textStyle: textStyle,
     iconColor: theme.colors.accent.text,
     onItemPress: onItemPress,
     testID: testID
-  }), [rowStyle, cellStyle, pressedStyle, textStyle, theme, onItemPress, testID]);
+  }), [rowStyle, cellStyle, textStyle, theme, onItemPress, testID]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     style: style,
@@ -82,17 +82,23 @@ export const FileGrid = /*#__PURE__*/memo(function FileGrid({
 const FileGridCell = /*#__PURE__*/memo(function FileGridCell({
   item,
   cellStyle,
-  pressedStyle,
   textStyle,
   iconColor,
   onItemPress,
   testID
 }) {
+  const theme = useTheme();
+  const press = usePressState(onItemPress === undefined);
   const handlePress = useCallback(() => onItemPress?.(item.id), [onItemPress, item.id]);
-  const pressableStyle = useCallback(({
-    pressed
-  }) => [cellStyle, pressed ? pressedStyle : null], [cellStyle, pressedStyle]);
   const accessibleLabel = resolveFileGridItemLabel(item.label, item.typeLabel);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: concentric(theme.radii.lg, theme.space[2]),
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.lg, theme.space]);
+  const pressableStyle = useMemo(() => [cellStyle, {
+    overflow: "hidden"
+  }, press.animatedStyle], [cellStyle, press.animatedStyle]);
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Icon, {
       name: item.icon ?? DEFAULT_ICON,
@@ -114,20 +120,29 @@ const FileGridCell = /*#__PURE__*/memo(function FileGridCell({
       children: content
     });
   }
-  return /*#__PURE__*/_jsx(Pressable, {
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: accessibleLabel,
     onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
+    android_ripple: Platform.OS === "android" ? {
+      color: rippleColor(theme.mode),
+      borderless: false
+    } : undefined,
     style: pressableStyle,
-    children: content
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), content]
   });
 });
 const FileGridRow = /*#__PURE__*/memo(function FileGridRow({
   row,
   rowStyle,
   cellStyle,
-  pressedStyle,
   textStyle,
   iconColor,
   onItemPress,
@@ -138,7 +153,6 @@ const FileGridRow = /*#__PURE__*/memo(function FileGridRow({
     children: row.items.map(item => /*#__PURE__*/_jsx(FileGridCell, {
       item: item,
       cellStyle: cellStyle,
-      pressedStyle: pressedStyle,
       textStyle: textStyle,
       iconColor: iconColor,
       onItemPress: onItemPress,

package/lib/module/modules/file-grid/FileGrid.variants.js

@@ -24,8 +24,8 @@ export const fileGridRowStructure = createThemedVariants(theme => ({
 }));
 export const fileGridCellStructure = createThemedVariants(theme => ({
   base: {
-    borderRadius: theme.radii.base,
-    borderWidth: theme.borderWidths.thin,
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous",
     padding: theme.space[2],
     alignItems: "center",
     justifyContent: "center",

package/lib/module/modules/file-grid/MODULE.md

@@ -1,6 +1,7 @@
 # file-grid/
 
-Grid of file/folder cells with icon + label. `columns`: 2 | 3 | 4.
+Grid of file/folder cells with icon + label. `columns`: 2 | 3 | 4. Cells are a tonal `bg.raised`
+fill, no hairline border — the same borderless-tile treatment `Card`'s `elevated` variant uses.
 
 ## Accessibility contract (WCAG)
 
@@ -10,3 +11,4 @@ Grid of file/folder cells with icon + label. `columns`: 2 | 3 | 4.
   `label` alone when the consumer names no type. Applies to both a pressable cell
   (`accessibilityLabel`) and a read-only one (wrapped `accessible` + `accessibilityLabel`, which it
   did not carry at all before).
+- **Press feedback** — cells with `onPress` use `usePressState` (scale + state-layer overlay).

package/lib/module/modules/file-upload/FileUpload.variants.js

@@ -180,6 +180,7 @@ export const fileUploadProgressTrackStructure = createThemedVariants(theme => ({
     alignSelf: "stretch",
     height: 4,
     borderRadius: theme.radii.full,
+    borderCurve: "continuous",
     overflow: "hidden"
   }
 }));
@@ -214,7 +215,8 @@ export const fileUploadRowStructure = createThemedVariants(theme => ({
     alignItems: "center",
     columnGap: theme.space[2],
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     paddingHorizontal: theme.space[3],
     paddingVertical: theme.space[2]
   }

package/lib/module/modules/file-upload/MODULE.md

@@ -146,3 +146,5 @@ Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLA
 - Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
 - List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
 - `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.

package/lib/module/modules/filter-sheet/FilterChip.js

@@ -16,9 +16,10 @@
  */
 
 import { memo, useMemo } from "react";
-import { Animated, Pressable, Text, View } from "react-native";
+import { Animated, Platform, Pressable, Text, View } from "react-native";
 import { Icon } from "../../core/icon/index.js";
 import { usePressMotion } from "../../core/motion/index.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { FILTER_CHIP_HIT_SLOP, FILTER_CHIP_ICON_SIZE, filterChipStructure, resolveFilterChipAccessibility, resolveFilterChipColors } from "./FilterSheet.variants.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,6 +46,10 @@ export const FilterChip = /*#__PURE__*/memo(function FilterChip({
     fontSize: theme.fontSizes.sm,
     color: colors.text
   }], [theme, colors]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Text, {
       numberOfLines: 1,
@@ -75,9 +80,12 @@ export const FilterChip = /*#__PURE__*/memo(function FilterChip({
     onPressIn: press.onPressIn,
     onPressOut: press.onPressOut,
     hitSlop: FILTER_CHIP_HIT_SLOP,
-    style: style,
+    android_ripple: androidRipple,
+    style: [chipStyle, {
+      overflow: "hidden"
+    }, style],
     children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [chipStyle, press.style],
+      style: press.style,
       children: content
     })
   });

package/lib/module/modules/filter-sheet/FilterSheetBody.js

@@ -19,8 +19,10 @@
  */
 
 import { memo, useCallback, useMemo, useState } from "react";
-import { Animated, Pressable, StyleSheet, Text, useWindowDimensions, View } from "react-native";
+import { Animated, Platform, Pressable, StyleSheet, Text, useWindowDimensions, View } from "react-native";
+import Reanimated, { LinearTransition, ReduceMotion } from "react-native-reanimated";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { VirtualList } from "../../core/list/index.js";
 import { usePressMotion } from "../../core/motion/index.js";
 import { Accordion } from "../accordion/index.js";
@@ -196,9 +198,10 @@ const QuickChipRow = /*#__PURE__*/memo(function QuickChipRow({
   }, [dimension.kind, value]);
   const handleToggle = useCallback(optionValue => onToggle(dimension, optionValue), [onToggle, dimension]);
   if (quickOptions.length === 0) return null;
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     testID: testID ? `${testID}-quick-${dimension.key}` : undefined,
     style: rowStyle,
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
     children: quickOptions.map(option => /*#__PURE__*/_jsx(QuickChip, {
       label: option.label,
       value: option.value,
@@ -230,6 +233,14 @@ const QuickChip = /*#__PURE__*/memo(function QuickChip({
     fontSize: theme.fontSizes.sm,
     color: colors.text
   }], [theme, selected, colors]);
+  const chipStyle = useMemo(() => [styles.chip, {
+    borderRadius: theme.radii.full,
+    overflow: "hidden"
+  }], [theme.radii.full]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   return /*#__PURE__*/_jsx(Pressable, {
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
@@ -240,7 +251,8 @@ const QuickChip = /*#__PURE__*/memo(function QuickChip({
     onPress: handlePress,
     onPressIn: press.onPressIn,
     onPressOut: press.onPressOut,
-    style: styles.chip,
+    android_ripple: androidRipple,
+    style: chipStyle,
     children: /*#__PURE__*/_jsx(Animated.View, {
       style: [structure, {
         backgroundColor: colors.background,

package/lib/module/modules/filter-sheet/MODULE.md

@@ -134,3 +134,12 @@ never a migration.
 - Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
 - List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
 - `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.
+- **Round 5 (Android parity)** — `FilterChip` and the quick-chip (`QuickChip`) both gained
+  `android_ripple` (`borderless: false`). `FilterChip` was restructured so its border/radius style
+  lives on the `Pressable` itself (matching `Chip`'s precedent) rather than an inner `Animated.View`,
+  with `overflow: "hidden"` added so the ripple clips to the chip shape. `QuickChip`'s `Pressable`
+  gained its own matching `borderRadius: theme.radii.full` + `overflow: "hidden"` for the same
+  reason — the pill radius otherwise lives only on its inner `Animated.View`, which the ripple (drawn
+  on the `Pressable`) doesn't clip against.

package/lib/module/modules/folder-row/FolderRow.js

@@ -2,23 +2,20 @@
 
 /**
  * FolderRow — file-browser style row with optional leading icon and trailing meta text.
- *
- * It is rendered AS a list cell at scale, so it carries no mount animation and no loop: press
- * feedback is a plain pressed background colour. Colours and style arrays are memoized so a
- * parent re-render with unchanged props costs nothing.
- *
- * Keyboard/AT focus draws an INSET ring (WCAG 2.4.7) rather than the gap-outside ring `Button` uses
- * — a full-bleed row's outset ring is clipped by the list it sits in.
  */
 
 import { memo, useCallback, useMemo, useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { folderRowFocusRingStructure, folderRowStructure, resolveFolderRowAccessibleName, resolveFolderRowColors } from "./FolderRow.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const ICON_SIZE = 22;
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export const FolderRow = /*#__PURE__*/memo(function FolderRow({
   title,
   subtitle,
@@ -31,7 +28,7 @@ export const FolderRow = /*#__PURE__*/memo(function FolderRow({
   const theme = useTheme();
   const colors = useMemo(() => resolveFolderRowColors(theme.colors), [theme.colors]);
   const structure = useMemo(() => folderRowStructure(theme), [theme]);
-  // Keyboard / external-keyboard / assistive-tech focus (no-op on pure touch, correct everywhere else).
+  const press = usePressState(onPress === undefined);
   const [focused, setFocused] = useState(false);
   const titleStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
     fontSize: theme.fontSizes.md,
@@ -49,11 +46,15 @@ export const FolderRow = /*#__PURE__*/memo(function FolderRow({
   const staticStyle = useMemo(() => [structure, {
     backgroundColor: colors.background
   }, style], [structure, colors, style]);
-  const rootStyle = useCallback(({
-    pressed
-  }) => [structure, {
-    backgroundColor: pressed ? colors.pressed : colors.background
-  }, style], [structure, colors, style]);
+  const pressableStyle = useMemo(() => [structure, {
+    backgroundColor: colors.background,
+    overflow: "hidden"
+  }, press.animatedStyle, style], [structure, colors, press.animatedStyle, style]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.lg]);
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
   const focusRingStyle = useMemo(() => [folderRowFocusRingStructure(theme), {
@@ -75,15 +76,26 @@ export const FolderRow = /*#__PURE__*/memo(function FolderRow({
       children: body
     });
   }
-  return /*#__PURE__*/_jsxs(Pressable, {
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: accessibleName,
     onPress: onPress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     onFocus: handleFocus,
     onBlur: handleBlur,
-    style: rootStyle,
-    children: [focused && /*#__PURE__*/_jsx(View, {
+    android_ripple: Platform.OS === "android" ? {
+      color: rippleColor(theme.mode),
+      borderless: false
+    } : undefined,
+    style: pressableStyle,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      testID: testID === undefined ? undefined : `${testID}-press-overlay`,
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), focused && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none",
       testID: testID === undefined ? undefined : `${testID}-focus-ring`,
       style: focusRingStyle

package/lib/module/modules/folder-row/FolderRow.variants.js

@@ -8,7 +8,8 @@ export const folderRowStructure = createThemedVariants(theme => ({
     columnGap: theme.space[3],
     paddingHorizontal: theme.space[3],
     paddingVertical: theme.space[3],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous"
   }
 }));
 
@@ -26,7 +27,8 @@ export const folderRowFocusRingStructure = createThemedVariants(theme => ({
     right: 0,
     bottom: 0,
     borderWidth: theme.borderWidths.thick,
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous"
   }
 }));
 /**

package/lib/module/modules/folder-row/MODULE.md

@@ -63,7 +63,8 @@ This row's per-render allocations are multiplied by the caller's row count, so:
   `StyleSheet.create`. No style object is rebuilt per render.
 - **No internal list** — nothing here to virtualize. Windowing is the caller's `FlatList`.
 - **No mount animation, ever.** A per-row enter animation would run during the caller's scroll.
-  Press feedback stays a plain background-colour swap — no `usePressMotion`, no `Animated` value.
+  Press feedback uses `usePressState` (scale + state-layer overlay) plus the existing `bg.sunken`
+  background swap.
 
 ## Known gaps
 

package/lib/module/modules/gantt/Gantt.js

@@ -10,9 +10,12 @@
  */
 
 import { memo, useCallback, useMemo, useState } from "react";
-import { Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from "react-native";
+import { Platform, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from "react-native";
+import { useDeviceTier } from "../../core/device/index.js";
 import { useTheme } from "../../theme/hooks.js";
-import { computeGanttModel, resolveGanttColors, GANTT_BAR_H, GANTT_BAR_HIT_SLOP, GANTT_LABEL_W, GANTT_ROW_H } from "./Gantt.variants.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { Button } from "../button/Button.js";
+import { computeGanttModel, resolveGanttColors, resolveVisibleGanttLanes, GANTT_BAR_H, GANTT_BAR_HIT_SLOP, GANTT_LABEL_W, GANTT_ROW_H, MAX_RENDERED_LANES } from "./Gantt.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BAR_TOP = (GANTT_ROW_H - GANTT_BAR_H) / 2;
 const BAR_RADIUS = 5;
@@ -44,9 +47,14 @@ const GanttLaneBar = /*#__PURE__*/memo(function GanttLaneBar({
   complete,
   ariaLabel,
   colors,
+  mode,
   onPress
 }) {
   const handlePress = useCallback(() => onPress?.(id), [onPress, id]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(mode),
+    borderless: false
+  } : undefined, [mode]);
   const barColor = complete ? colors.barComplete : colors.bar;
   const barStyle = useMemo(() => ({
     position: "absolute",
@@ -73,6 +81,7 @@ const GanttLaneBar = /*#__PURE__*/memo(function GanttLaneBar({
       accessibilityLabel: ariaLabel,
       onPress: onPress === undefined ? undefined : handlePress,
       hitSlop: GANTT_BAR_HIT_SLOP,
+      android_ripple: androidRipple,
       style: barStyle,
       children: !isMarker ? /*#__PURE__*/_jsx(View, {
         pointerEvents: "none",
@@ -92,8 +101,13 @@ export const Gantt = /*#__PURE__*/memo(function Gantt({
     width: winW
   } = useWindowDimensions();
   const [now] = useState(() => Date.now());
+  const tier = useDeviceTier();
+  const [expanded, setExpanded] = useState(false);
   const model = useMemo(() => computeGanttModel(lanes, winW, now), [lanes, winW, now]);
   const colors = useMemo(() => resolveGanttColors(theme.colors), [theme.colors]);
+  const maxLanes = MAX_RENDERED_LANES[tier];
+  const visible = useMemo(() => resolveVisibleGanttLanes(model, maxLanes, expanded), [model, maxLanes, expanded]);
+  const handleShowAll = useCallback(() => setExpanded(true), []);
   const rootStyle = useMemo(() => [{
     gap: theme.space[2]
   }, style], [theme, style]);
@@ -119,13 +133,13 @@ export const Gantt = /*#__PURE__*/memo(function Gantt({
   }], [theme, colors]);
   const chartBodyStyle = useMemo(() => ({
     width: model.chartWidth,
-    height: model.bodyHeight
-  }), [model.chartWidth, model.bodyHeight]);
+    height: visible.bodyHeight
+  }), [model.chartWidth, visible.bodyHeight]);
   const todayStyle = useMemo(() => ({
     left: model.todayX,
-    height: model.bodyHeight,
+    height: visible.bodyHeight,
     backgroundColor: colors.today
-  }), [model.todayX, model.bodyHeight, colors.today]);
+  }), [model.todayX, visible.bodyHeight, colors.today]);
   if (model.empty) {
     return /*#__PURE__*/_jsx(View, {
       testID: testID,
@@ -154,7 +168,7 @@ export const Gantt = /*#__PURE__*/memo(function Gantt({
       children: [/*#__PURE__*/_jsx(View, {
         "aria-hidden": true,
         style: styles.labelColumn,
-        children: model.lanes.map(lane => /*#__PURE__*/_jsx(GanttLaneLabel, {
+        children: visible.lanes.map(lane => /*#__PURE__*/_jsx(GanttLaneLabel, {
           label: lane.label,
           sublabel: lane.sublabel,
           labelStyle: labelStyle,
@@ -166,7 +180,7 @@ export const Gantt = /*#__PURE__*/memo(function Gantt({
         style: styles.chart,
         children: /*#__PURE__*/_jsxs(View, {
           style: chartBodyStyle,
-          children: [model.lanes.map(lane => /*#__PURE__*/_jsx(GanttLaneBar, {
+          children: [visible.lanes.map(lane => /*#__PURE__*/_jsx(GanttLaneBar, {
             id: lane.id,
             leftPx: lane.leftPx,
             widthPx: lane.widthPx,
@@ -175,6 +189,7 @@ export const Gantt = /*#__PURE__*/memo(function Gantt({
             complete: lane.complete,
             ariaLabel: lane.ariaLabel,
             colors: colors,
+            mode: theme.mode,
             onPress: onLanePress
           }, lane.id)), model.showToday ? /*#__PURE__*/_jsx(View, {
             pointerEvents: "none",
@@ -182,7 +197,13 @@ export const Gantt = /*#__PURE__*/memo(function Gantt({
           }) : null]
         })
       })]
-    })]
+    }), visible.hiddenCount > 0 ? /*#__PURE__*/_jsx(Button, {
+      variant: "link",
+      size: "sm",
+      label: `Show all ${visible.totalCount} lanes`,
+      onPress: handleShowAll,
+      testID: testID ? `${testID}-show-all` : undefined
+    }) : null]
   });
 });
 const styles = StyleSheet.create({

package/lib/module/modules/gantt/Gantt.variants.js

@@ -16,6 +16,18 @@ export const GANTT_PAD_MS = 2 * MS_PER_DAY;
 
 /** WCAG 2.5.5 target size, the library-wide floor (`Tabs`/`Pagination`/`Reorder` all pin the same 44). */
 export const MIN_TOUCH_TARGET = 44;
+
+/**
+ * Lanes rendered before the "show all" affordance takes over — the same worst-case safety valve as
+ * `MAX_RENDERED_POINTS` in `Charts.variants.ts`, tier-scaled because a lane count this large comes
+ * from real ticket/epic data (this component's own documented origin), not a series a caller could
+ * decimate without losing rows a reader actually needs.
+ */
+export const MAX_RENDERED_LANES = {
+  low: 40,
+  mid: 80,
+  high: 150
+};
 const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
 
 /**
@@ -138,4 +150,28 @@ export function computeGanttModel(lanes, windowWidth, nowMs) {
     rangeLabel: `${monthYear(domainStart)} – ${monthYear(domainEnd)}`
   };
 }
+/**
+ * Slices the already-laid-out lanes to `maxLanes` unless `expanded`. Safe to slice AFTER
+ * `computeGanttModel`: each lane's `leftPx`/`widthPx` is derived from the shared time domain, not
+ * from its position in the array, so dropping trailing lanes never shifts the ones kept. `bodyHeight`
+ * is recomputed for the slice so the chart body and the "today" line never overshoot the rendered rows.
+ */
+export function resolveVisibleGanttLanes(model, maxLanes, expanded) {
+  const total = model.lanes.length;
+  if (expanded || total <= maxLanes) {
+    return {
+      lanes: model.lanes,
+      bodyHeight: model.bodyHeight,
+      totalCount: total,
+      hiddenCount: 0
+    };
+  }
+  const lanes = model.lanes.slice(0, maxLanes);
+  return {
+    lanes,
+    bodyHeight: GANTT_ROW_H * lanes.length,
+    totalCount: total,
+    hiddenCount: total - lanes.length
+  };
+}
 //# sourceMappingURL=Gantt.variants.js.map

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

@@ -42,7 +42,10 @@ observed ratio is in brackets.
 duration, so growing it to 44dp would lie about the data. `GANTT_BAR_HIT_SLOP` widens the press target
 instead — sized off the narrowest bar the layout can produce (`GANTT_MARKER_W`, 12dp), so every bar
 clears `MIN_TOUCH_TARGET`. Vertical slop is capped so `GANTT_BAR_H + 2×top ≤ GANTT_ROW_H` and adjacent
-rows' targets never overlap.
+rows' targets never overlap. On Android the bar's `Pressable` also carries `android_ripple`
+(`rippleColor(theme.mode)`, `borderless: false`) — `GanttLaneBar` takes a `mode: ColorScheme` prop
+from `Gantt` to resolve it. This is unrelated to the bar's decorative hairline (see above), which is
+untouched.
 
 **1.3.1 — the pinned label column is decorative.** It used to be a second, un-hidden column of
 `Text` nodes reading the same names the bars already carry inside their own composed
@@ -69,3 +72,10 @@ desyncs their vertical alignment, and the full-height "today" rule is absolutely
 `bodyHeight`. The chart also has no bounded height of its own — it renders inside a consumer `ScrollView`,
 where a nested `VirtualizedList` warns and windows nothing. Rows are cheap (one `Pressable` + one fill
 `View`) and memo'd instead.
+
+**`MAX_RENDERED_LANES` — a safety cap, not virtualization.** A `useDeviceTier()`-scaled cap (40/80/150
+lanes, low/mid/high — same worst-case valve as `Charts.variants.ts`'s `MAX_RENDERED_POINTS`) slices the
+already-laid-out lanes identically in both `.map()`s via `resolveVisibleGanttLanes`, so the two columns
+stay in sync; past the cap a "Show all N lanes" `Button` reveals the rest on press. This bounds the
+unbounded worst case (a large ticket/epic timeline on a low-end device) without windowing the common
+case, so it doesn't reintroduce the desync problem above.