pixelize-native-library 1.2.0 → 1.3.0

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

@@ -22,7 +22,7 @@
  */
 
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { Animated } from "react-native";
+import Reanimated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion } from "react-native-reanimated";
 import { useEnterExit } from "../../core/motion/index.js";
 import { Drawer } from "../drawer/index.js";
 import { FilterSheetBody } from "./FilterSheetBody.js";
@@ -84,19 +84,24 @@ export const FilterSheet = /*#__PURE__*/memo(function FilterSheet({
     visible: visible,
     onRequestClose: handleDismiss,
     testID: testID,
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: reveal.style,
-      children: /*#__PURE__*/_jsx(FilterSheetBody, {
-        dimensions: dimensions,
-        staged: staged,
-        onQuickToggle: handleQuickToggle,
-        onDimensionChange: handleDimensionChange,
-        onApply: handleApply,
-        onReset: onReset !== undefined ? handleReset : undefined,
-        title: title,
-        applyLabel: applyLabel,
-        resetLabel: resetLabel,
-        testID: testID
+    children: /*#__PURE__*/_jsx(Reanimated.View, {
+      entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+      exiting: FadeOut.reduceMotion(ReduceMotion.System),
+      layout: LinearTransition.reduceMotion(ReduceMotion.System),
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
+        style: reveal.style,
+        children: /*#__PURE__*/_jsx(FilterSheetBody, {
+          dimensions: dimensions,
+          staged: staged,
+          onQuickToggle: handleQuickToggle,
+          onDimensionChange: handleDimensionChange,
+          onApply: handleApply,
+          onReset: onReset !== undefined ? handleReset : undefined,
+          title: title,
+          applyLabel: applyLabel,
+          resetLabel: resetLabel,
+          testID: testID
+        })
       })
     })
   });

package/lib/module/modules/filter-sheet/FilterSheet.variants.js

@@ -17,20 +17,19 @@
  * only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { removeAccessibilityLabel } from "../../core/a11y/labels.js";
 import { createThemedVariants } from "../../core/style/index.js";
 
 /** Same touch-target floor as every interactive control in this library (44dp — Apple HIG minimum,
  *  WCAG 2.5.5 AAA). */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
-
 /** The sheet's scrollable dimension-list cap — a fraction of the window, capped at an absolute
  *  maximum, the same approximation `resolveOverflowSheetHeight` uses for BottomNav's own sheet. The
  *  title header and the Apply/Reset footer render OUTSIDE this cap so they stay visible regardless
  *  of how many dimensions a consumer supplies. */
 export const FILTER_SHEET_BODY_HEIGHT_RATIO = 0.5;
 export const FILTER_SHEET_BODY_MAX_HEIGHT = 420;
+export { MIN_TOUCH_TARGET };
 export function resolveFilterSheetBodyHeight(windowHeight) {
   return Math.min(windowHeight * FILTER_SHEET_BODY_HEIGHT_RATIO, FILTER_SHEET_BODY_MAX_HEIGHT);
 }

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 { Platform, Pressable, StyleSheet, Text, useWindowDimensions, View } from "react-native";
+import Reanimated, { FadeInDown, FadeOut, 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";
@@ -138,12 +140,17 @@ const DimensionSection = /*#__PURE__*/memo(function DimensionSection({
       testID: controlTestID
     })
   }], [dimension, value, handleChange, controlTestID]);
-  return /*#__PURE__*/_jsx(Accordion, {
-    type: "single",
-    items: items,
-    value: expanded ? dimension.key : "",
-    onValueChange: onOpenChange,
-    testID: testID ? `${testID}-accordion` : undefined
+  return /*#__PURE__*/_jsx(Reanimated.View, {
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
+    entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+    exiting: FadeOut.reduceMotion(ReduceMotion.System),
+    children: /*#__PURE__*/_jsx(Accordion, {
+      type: "single",
+      items: items,
+      value: expanded ? dimension.key : "",
+      onValueChange: onOpenChange,
+      testID: testID ? `${testID}-accordion` : undefined
+    })
   });
 });
 /**
@@ -196,9 +203,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 +238,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,15 +256,21 @@ const QuickChip = /*#__PURE__*/memo(function QuickChip({
     onPress: handlePress,
     onPressIn: press.onPressIn,
     onPressOut: press.onPressOut,
-    style: styles.chip,
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [structure, {
-        backgroundColor: colors.background,
-        borderColor: colors.border
-      }, press.style],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: labelStyle,
-        children: label
+    android_ripple: androidRipple,
+    style: chipStyle,
+    children: /*#__PURE__*/_jsx(Reanimated.View, {
+      entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+      exiting: FadeOut.reduceMotion(ReduceMotion.System),
+      layout: LinearTransition.reduceMotion(ReduceMotion.System),
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
+        style: [structure, {
+          backgroundColor: colors.background,
+          borderColor: colors.border
+        }, press.style],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: labelStyle,
+          children: label
+        })
       })
     })
   });

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

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=FilterSheetProps.js.map

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

@@ -129,8 +129,8 @@ never a migration.
   already showing — this is the library's existing, tested `MultiSelect` composed as-is (per
   CLAUDE.md's component decision order), not a new modal-stacking mechanism built for this module.
 
-## Modernization (v1.0.7)
+## Android ripple
 
-- 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.
+Both `FilterChip` and the private `QuickChip` carry `android_ripple` (`borderless: false`) on the
+`Pressable` itself, which is also where their border/radius and `overflow: "hidden"` live — a radius
+that sits only on an inner `Animated.View` does not clip a ripple drawn on the `Pressable`.

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,18 +76,31 @@ 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, {
-      pointerEvents: "none",
+    android_ripple: Platform.OS === "android" ? {
+      color: rippleColor(theme.mode),
+      borderless: false
+    } : undefined,
+    style: pressableStyle,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      testID: testID === undefined ? undefined : `${testID}-press-overlay`,
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
+    }), focused && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-focus-ring`,
-      style: focusRingStyle
+      style: [focusRingStyle, {
+        pointerEvents: 'none'
+      }]
     }), body]
   });
 });

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/FolderRowProps.js

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

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

@@ -1,11 +1,12 @@
-# folder-row/
+# folder-row/ — a single file-browser row for a consumer-owned list
 
 A file-browser row. `FolderRow` renders ONE leaf row: leading icon, title, optional subtitle, optional trailing meta
 text. There is no internal list — consumers render hundreds of these inside their own
 `FlatList`/`VirtualList`, so every cost in this file is multiplied by the row count.
 
-With `onPress` the root is a `Pressable` (pressed state swaps the background to `bg.sunken`);
-without it the root is a plain `View`. That is the only branch in the component.
+With `onPress` the root is a `Pressable` (press feedback is `usePressState` — scale plus a
+`stateLayerScrim` overlay — over an unchanged `bg.surface` fill) and a focus ring is drawn while
+focused; without `onPress` the root is a plain, unfocusable `View`.
 
 ## Files
 
@@ -63,7 +64,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 is `usePressState` alone (scale + state-layer overlay); the row's own fill never
+  changes.
 
 ## Known gaps
 

package/lib/module/modules/form-field/FormField.js

@@ -12,9 +12,10 @@
  */
 
 import { memo, useId, useMemo, useRef } from "react";
-import { Animated, Text, View } from "react-native";
+import { Text, View } from "react-native";
 import { useAnnounce } from "../../core/a11y/index.js";
-import { useEnterExit } from "../../core/motion/index.js";
+import { AnimatedText, useEnterExit } from "../../core/motion/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { formFieldDescriptionId, formFieldMessageId, formFieldStructure, resolveFormFieldAccessibility, resolveFormFieldMessage, resolveFormFieldStatus } from "./FormField.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -67,6 +68,10 @@ export const FormField = /*#__PURE__*/memo(function FormField({
     fontSize: theme.fontSizes.xs,
     color: colors.description
   }], [theme, colors.description]);
+  const controlSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.md,
+    color: theme.colors.fg.default
+  }], [theme]);
   const messageStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
     fontSize: theme.fontSizes.xs,
     color: colors.message
@@ -86,13 +91,13 @@ export const FormField = /*#__PURE__*/memo(function FormField({
       nativeID: formFieldDescriptionId(idPrefix),
       style: descriptionStyle,
       children: description
-    }), children(control), messageMotion.mounted && lastMessage.current !== undefined &&
+    }), renderNodeSlot(children(control), controlSlotStyle), messageMotion.mounted && lastMessage.current !== undefined &&
     /*#__PURE__*/
     // No `accessibilityLiveRegion` (deliberate): it's Android-only, and `useAnnounce` above
     // already announces on both platforms — keeping both would double-announce on Android.
     // Hidden only once the message is gone: `lastMessage` outlives it for the exit tween, and a
     // stale error must not sit in the a11y tree while it fades.
-    _jsx(Animated.Text, {
+    _jsx(AnimatedText, {
       nativeID: formFieldMessageId(idPrefix),
       accessibilityElementsHidden: message === undefined,
       importantForAccessibility: message === undefined ? "no-hide-descendants" : undefined,

package/lib/module/modules/form-field/FormFieldProps.js

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

package/lib/module/modules/form-field/MODULE.md

@@ -94,10 +94,5 @@ accessibilityLabel={control.accessibilityLabel} />`.
 ## Performance
 
 Wrapped in `React.memo`. `formFieldStructure` is a themed resolver, so it compiles once per theme
-identity, not per render.
-
-## Modernization (v1.0.7)
-
-- 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.
+identity, not per render. The message line renders through `core/motion`'s `AnimatedText`, driven by
+`useEnterExit`; a ref holds the last message on screen while the exit tween runs.

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

@@ -9,10 +9,13 @@
  * accessible node per lane, holding the whole relationship, is what a screen reader can act on.
  */
 
-import { memo, useCallback, useMemo, useState } from "react";
-import { Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from "react-native";
+import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+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, resolveGanttInitialScrollX, 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,10 +81,12 @@ 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",
-        style: fillStyle
+        style: [fillStyle, {
+          pointerEvents: 'none'
+        }]
       }) : null
     })
   });
@@ -92,8 +102,26 @@ export const Gantt = /*#__PURE__*/memo(function Gantt({
     width: winW
   } = useWindowDimensions();
   const [now] = useState(() => Date.now());
+  const tier = useDeviceTier();
+  const [expanded, setExpanded] = useState(false);
+  const scrollRef = useRef(null);
+  const [chartViewportWidth, setChartViewportWidth] = useState(0);
   const model = useMemo(() => computeGanttModel(lanes, winW, now), [lanes, winW, now]);
+  const initialScrollX = useMemo(() => resolveGanttInitialScrollX(model, chartViewportWidth), [model, chartViewportWidth]);
   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 handleChartLayout = useCallback(event => {
+    setChartViewportWidth(event.nativeEvent.layout.width);
+  }, []);
+  useLayoutEffect(() => {
+    if (chartViewportWidth <= 0) return;
+    scrollRef.current?.scrollTo({
+      x: initialScrollX,
+      animated: false
+    });
+  }, [initialScrollX, chartViewportWidth, lanes]);
   const rootStyle = useMemo(() => [{
     gap: theme.space[2]
   }, style], [theme, style]);
@@ -119,13 +147,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,19 +182,21 @@ 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,
           sublabelStyle: sublabelStyle
         }, lane.id))
       }), /*#__PURE__*/_jsx(ScrollView, {
+        ref: scrollRef,
         horizontal: true,
         showsHorizontalScrollIndicator: true,
         style: styles.chart,
+        onLayout: handleChartLayout,
         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,14 +205,22 @@ 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",
-            style: [styles.todayLine, todayStyle]
+            style: [styles.todayLine, todayStyle, {
+              pointerEvents: 'none'
+            }]
           }) : 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

@@ -4,6 +4,7 @@
  * Gantt layout math — ported from tickets/mobile EpicTimeline. Pure, testable.
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 export const MS_PER_DAY = 86_400_000;
 export const GANTT_LABEL_W = 108;
 export const GANTT_ROW_H = 46;
@@ -14,9 +15,17 @@ export const GANTT_BASE_PX_PER_DAY = 4;
 export const GANTT_MIN_SPAN_MS = 14 * MS_PER_DAY;
 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;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
+/**
+ * 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
+};
 
 /**
  * A bar is a *data mark* — its 18dp height encodes nothing but the chart's row rhythm, and its width
@@ -44,6 +53,7 @@ export const GANTT_BAR_HIT_SLOP = {
  *    `fg.subtle` (a flat `gray[500]`) falls to 3.19:1 on emerald light. Same defect as `Text`'s
  *    `overline` and `Timeline`'s timestamp.
  */
+export { MIN_TOUCH_TARGET };
 export function resolveGanttColors(colors) {
   return {
     bar: colors.accent.solid,
@@ -138,4 +148,38 @@ 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.
+ */
+/**
+ * Horizontal scroll offset so the earliest lane (or today, when shown) is inside the viewport.
+ * `viewportWidth` is the chart `ScrollView` width, not the full window.
+ */
+export function resolveGanttInitialScrollX(model, viewportWidth, paddingPx = 8) {
+  if (model.empty || model.chartWidth <= viewportWidth) return 0;
+  const minLeft = model.lanes.reduce((m, lane) => Math.min(m, lane.leftPx), Number.POSITIVE_INFINITY);
+  const maxScroll = model.chartWidth - viewportWidth;
+  return Math.max(0, Math.min(minLeft - paddingPx, maxScroll));
+}
+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/GanttProps.js

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