pixelize-native-library 1.2.1 → 1.3.0

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

@@ -9,13 +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 { 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 { 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 { 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;
@@ -84,8 +84,9 @@ const GanttLaneBar = /*#__PURE__*/memo(function GanttLaneBar({
       android_ripple: androidRipple,
       style: barStyle,
       children: !isMarker ? /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
-        style: fillStyle
+        style: [fillStyle, {
+          pointerEvents: 'none'
+        }]
       }) : null
     })
   });
@@ -103,11 +104,24 @@ export const Gantt = /*#__PURE__*/memo(function Gantt({
   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]);
@@ -175,9 +189,11 @@ export const Gantt = /*#__PURE__*/memo(function Gantt({
           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: [visible.lanes.map(lane => /*#__PURE__*/_jsx(GanttLaneBar, {
@@ -192,8 +208,9 @@ export const Gantt = /*#__PURE__*/memo(function Gantt({
             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]
         })
       })]

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,6 @@ 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;
-
 /**
  * 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
@@ -28,7 +26,6 @@ export const MAX_RENDERED_LANES = {
   mid: 80,
   high: 150
 };
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
 
 /**
  * A bar is a *data mark* — its 18dp height encodes nothing but the chart's row rhythm, and its width
@@ -56,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,
@@ -156,6 +154,16 @@ export function computeGanttModel(lanes, windowWidth, nowMs) {
  * 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) {

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

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

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

@@ -1,4 +1,4 @@
-# gantt/
+# gantt/ — a horizontal Gantt chart of time-ranged lanes
 
 Horizontal Gantt chart — ported from tickets/mobile `EpicTimeline`. Pure layout in `Gantt.variants.ts`.
 
@@ -11,7 +11,7 @@ Horizontal Gantt chart — ported from tickets/mobile `EpicTimeline`. Pure layou
 
 ## Props
 
-`lanes` (`GanttLaneInput[]`: id, label, sublabel, startMs, endMs, progress) · `onLanePress(id)` ·
+`lanes` (`GanttLaneInput[]`: id, label, sublabel, startMs, endMs, `progress` 0–100 like `ProgressBar`) · `onLanePress(id)` ·
 `style` (layout-only, outermost, once, last) · `testID`. A lane shorter than a day renders as a marker.
 
 ## Colour & accessibility
@@ -41,7 +41,7 @@ observed ratio is in brackets.
 **Touch targets.** A bar is a data mark: its 18dp height is the row rhythm and its width is the lane's
 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
+clears `MIN_TOUCH_TARGET` (`core/a11y/touchTarget`, re-exported from `Gantt.variants.ts`). Vertical slop is capped so `GANTT_BAR_H + 2×top ≤ GANTT_ROW_H` and adjacent
 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

package/lib/module/modules/image-viewer/ImageViewer.js

@@ -6,7 +6,8 @@
  */
 
 import { memo, useCallback, useMemo, useRef, useState } from "react";
-import { Animated, FlatList, Platform, Pressable, Share, StyleSheet, useWindowDimensions, View } from "react-native";
+import { FlatList, Platform, Pressable, Share, StyleSheet, useWindowDimensions, View } from "react-native";
+import Reanimated from "react-native-reanimated";
 import { MediaImage } from "../../core/media/index.js";
 import { useEnterExit, useMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
@@ -132,7 +133,7 @@ export const ImageViewer = /*#__PURE__*/memo(function ImageViewer({
     title: current.label ?? "Image",
     size: "lg",
     testID: testID,
-    children: /*#__PURE__*/_jsxs(Animated.View, {
+    children: /*#__PURE__*/_jsxs(Reanimated.View, {
       testID: testID ? `${testID}-body` : undefined,
       style: [bodyStyle, enterExit.style, style],
       children: [/*#__PURE__*/_jsx(FlatList, {

package/lib/module/modules/image-viewer/ImageViewerProps.js

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

package/lib/module/modules/image-viewer/MODULE.md

@@ -1,4 +1,4 @@
-# image-viewer/
+# image-viewer/ — a modal image gallery with paging and thumbnails
 
 Modal image gallery with paging and thumbnails. Heavy module — subpath only.
 

package/lib/module/modules/input/Input.js

@@ -11,16 +11,16 @@
  */
 
 import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { Animated, Platform, StyleSheet, Text, TextInput, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 import { useAnnounce } from "../../core/a11y/index.js";
 import { withAlpha } from "../../core/gradient/index.js";
 import { Icon } from "../../core/icon/index.js";
-import { useAnimatedValue, useEnterExit, useMotion } from "../../core/motion/index.js";
+import { AnimatedText, useAnimatedValue, useEnterExit, useMotion } from "../../core/motion/index.js";
+import { FOCUS_RING_GAP, FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
 import { useTheme } from "../../theme/hooks.js";
 import { INPUT_SIZES, inputStructure, resolveInputAccessibility, resolveInputStatus } from "./Input.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const FOCUS_RING_WIDTH = 2;
-const FOCUS_RING_GAP = 2;
 export const Input = /*#__PURE__*/memo(function Input(props) {
   const {
     value,
@@ -34,12 +34,19 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
     errorText,
     leadingIcon,
     trailingIcon,
-    secureTextEntry,
+    onLeadingIconPress,
+    onTrailingIconPress,
+    isClearable = false,
+    showCharacterCount = false,
+    maxLength,
+    secureTextEntry: secureTextEntryProp,
     accessibilityLabel,
     containerStyle,
     testID,
     autoComplete
   } = props;
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  const secureTextEntry = secureTextEntryProp === true && !passwordVisible;
   const theme = useTheme();
   const motion = useMotion();
   const [focused, setFocused] = useState(false);
@@ -66,11 +73,14 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
   if (message !== undefined) lastMessage.current = message;
   const ringOpacity = useAnimatedValue(0);
   const ringAnimation = useRef(null);
+  const ringAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: ringOpacity.value
+  }));
   const setRingVisible = useCallback(visible => {
     ringAnimation.current?.stop();
     const to = visible ? 1 : 0;
     if (!motion.enabled) {
-      ringOpacity.setValue(to);
+      ringOpacity.value = to;
       return;
     }
     ringAnimation.current = motion.timing(ringOpacity, to, {
@@ -126,12 +136,31 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
     color: statusColors.message,
     marginTop: theme.space[1]
   }], [theme, statusColors.message]);
-  const glyph = name => /*#__PURE__*/_jsx(Icon, {
-    name: name,
-    size: spec.iconSize,
-    color: theme.colors.fg.muted,
-    strokeWidth: 2
-  });
+  const handleClear = useCallback(() => {
+    if (!disabled && value.length > 0) onChangeText("");
+  }, [disabled, onChangeText, value.length]);
+  const togglePassword = useCallback(() => {
+    setPasswordVisible(v => !v);
+  }, []);
+  const showClear = isClearable && value.length > 0 && !disabled;
+  const resolvedTrailing = secureTextEntryProp === true ? "eye" : trailingIcon;
+  const trailingPress = secureTextEntryProp === true ? togglePassword : onTrailingIconPress;
+  const glyph = (name, onPress) => {
+    const icon = /*#__PURE__*/_jsx(Icon, {
+      name: name,
+      size: spec.iconSize,
+      color: theme.colors.fg.muted,
+      strokeWidth: 2
+    });
+    if (onPress === undefined) return icon;
+    return /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      onPress: onPress,
+      hitSlop: spec.hitSlop,
+      testID: testID ? `${testID}-icon-${name}` : undefined,
+      children: icon
+    });
+  };
   return /*#__PURE__*/_jsxs(View, {
     style: containerStyle,
     children: [label !== undefined &&
@@ -145,19 +174,19 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
       children: label
     }), /*#__PURE__*/_jsxs(View, {
       style: fieldStyle,
-      children: [/*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
+      children: [/*#__PURE__*/_jsx(Reanimated.View, {
         testID: "input-focus-ring",
-        style: [focusRingStyle, {
-          opacity: ringOpacity
+        style: [focusRingStyle, ringAnimatedStyle, {
+          pointerEvents: 'none'
         }]
-      }), leadingIcon && glyph(leadingIcon), /*#__PURE__*/_jsx(TextInput, {
+      }), leadingIcon ? glyph(leadingIcon, onLeadingIconPress) : null, /*#__PURE__*/_jsx(TextInput, {
         testID: testID,
         value: value,
         onChangeText: onChangeText,
         placeholder: placeholder,
         placeholderTextColor: theme.colors.fg.placeholder,
         secureTextEntry: secureTextEntry,
+        maxLength: maxLength,
         autoComplete: autoComplete,
         importantForAutofill: autoComplete === "off" ? "no" : undefined,
         editable: a11y.editable,
@@ -170,14 +199,20 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
         onFocus: handleFocus,
         onBlur: handleBlur,
         style: inputTextStyle
-      }), trailingIcon && glyph(trailingIcon)]
-    }), messageMotion.mounted && lastMessage.current !== undefined &&
+      }), showClear ? glyph("x", handleClear) : null, resolvedTrailing ? glyph(resolvedTrailing, trailingPress) : null]
+    }), showCharacterCount && maxLength !== undefined ? /*#__PURE__*/_jsx(Text, {
+      style: [messageStyle, {
+        textAlign: "right",
+        marginTop: theme.space[1]
+      }],
+      children: `${value.length}/${maxLength}`
+    }) : null, 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: hintId,
       accessibilityElementsHidden: message === undefined,
       importantForAccessibility: message === undefined ? "no-hide-descendants" : undefined,

package/lib/module/modules/input/Input.variants.js

@@ -14,13 +14,12 @@
  * (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 
 /** A state, not a brand tone — an input's colour reports validity, so it is never called `tone`. */
 
-/** Same floor as Button — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules stay isolated. */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
 /**
  * Input-specific dimensions. Height/iconSize/slop are the component's own design constants;
  * `fontSize` sits on the theme's `fontSizes` scale (14/16/18) — same numbers as Button's sizes, so

package/lib/module/modules/input/InputProps.js

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

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

@@ -27,8 +27,12 @@ pure/testable resolvers, closed unions, no `{...rest}`.
 | `label` | `string` | — | Rendered above the field; falls back into `accessibilityLabel`. |
 | `helperText` | `string` | — | Shown below the field when `status` is `default`. |
 | `errorText` | `string` | — | Shown below the field (replacing `helperText`) and announced, when `status` is `error`. Joins the field's accessible NAME and sets `aria-invalid` — **not** `accessibilityHint` (see below; this used to contradict `FormField`'s own stated rule, fixed to match it). |
-| `leadingIcon` / `trailingIcon` | `IconName` | — | A NAME, never a `ReactNode`. Decorative (no built-in clear/press behaviour in v1). |
-| `secureTextEntry` | `boolean` | `false` | No visibility-toggle button in v1 — needs an icon outside the current catalogue. |
+| `leadingIcon` / `trailingIcon` | `IconName` | — | A NAME, never a `ReactNode`. Decorative unless the matching press handler is given. |
+| `onLeadingIconPress` / `onTrailingIconPress` | `() => void` | — | Makes that glyph a press target. A `secureTextEntry` field overrides the trailing pair with its own toggle. |
+| `isClearable` | `boolean` | `false` | Renders a clear affordance while `value` is non-empty and the field is enabled. |
+| `showCharacterCount` | `boolean` | `false` | Renders `"<length>/<maxLength>"` below the field — needs `maxLength` to show anything. |
+| `maxLength` | `number` | — | Forwarded to the `TextInput`; also the denominator of the character count. |
+| `secureTextEntry` | `boolean` | `false` | Masks the value and replaces `trailingIcon` with an `"eye"` toggle that reveals it. |
 | `accessibilityLabel` | `string` | `label` | Overrides the label fallback. |
 | `containerStyle` | `LayoutStyle` | — | The documented exception for a native-primitive wrapper. Outermost, last, once. Never `inputStyle`. |
 | `testID` | `string` | — | Forwarded to the underlying `TextInput`. |
@@ -43,7 +47,7 @@ pure/testable resolvers, closed unions, no `{...rest}`.
   `Pressable` that receives its `hitSlop`. `Input.render.test.tsx` asserts the rendered node, not
   just the `height + 2·hitSlop` arithmetic.
 - **1.4.3** — label/value text (`fg.default`), placeholder/helper text (`fg.muted`), and the error
-  message (`status.danger.text`) are all measured ≥ 4.5:1 against the canvas, for all 8 brands ×
+  message (`status.danger.text`) are all measured ≥ 4.5:1 against the canvas, for all 9 brands ×
   both modes (`Input.test.ts`). The field renders no explicit background (transparent, like Button's
   outline/ghost/link variants), so the canvas is what every colour is actually read against.
 - **1.4.11** — the resting/focus border (`border.interactive` / `border.focus`) and the error border
@@ -110,20 +114,9 @@ identity — so it is never called `tone`.
 
 ## Known gaps
 
-- No visibility-toggle button for `secureTextEntry` — would need an "eye" icon outside the current
-  22-name catalogue (`core/icon`); flagged rather than adding one from this module.
-- `leadingIcon`/`trailingIcon` are decorative-only in v1 (no `onClear` callback was in scope) — a
-  trailing `"x"` renders but doesn't clear the field; a future version could add an explicit
-  `onClear` prop if a consuming app needs it.
+- A `secureTextEntry` field owns its trailing slot outright: `trailingIcon`/`onTrailingIconPress`
+  are both replaced by the reveal toggle, so the two cannot be combined.
 
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Its one library child, `Icon`, only ever receives primitives — nothing to memoize; `TextInput`/`View` are host elements, outside this pass's scope.
-
-## 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.
-
-- **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/key-value/KeyValue.js

@@ -0,0 +1,36 @@
+"use strict";
+
+import { memo, useMemo } from "react";
+import { View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
+import { Text } from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const KeyValue = /*#__PURE__*/memo(function KeyValue({
+  label,
+  value,
+  stacked = true,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rowStyle = useMemo(() => ({
+    flexDirection: stacked ? "column" : "row",
+    justifyContent: stacked ? "flex-start" : "space-between",
+    alignItems: stacked ? "flex-start" : "center",
+    gap: theme.space[1],
+    paddingVertical: theme.space[2]
+  }), [stacked, theme]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [rowStyle, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "label-sm",
+      color: "muted",
+      children: label
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "body-sm",
+      children: value
+    })]
+  });
+});
+//# sourceMappingURL=KeyValue.js.map

package/lib/module/modules/key-value/KeyValueProps.js

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

package/lib/module/modules/key-value/MODULE.md

@@ -0,0 +1,16 @@
+# key-value/ — a single read-only label/value row
+
+Single read-only label/value row. Use `description-list` for grids.
+
+## Props
+
+| Prop | Type | Default |
+|------|------|---------|
+| `label` | `string` | — |
+| `value` | `string` | — |
+| `stacked` | `boolean` | `true` |
+| `style` | `LayoutStyle` | — |
+| `testID` | `string` | — |
+
+`stacked` (the default) puts the value under the label; `false` lays them out as a
+space-between row.

package/lib/module/modules/key-value/index.js

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

package/lib/module/modules/limit-reached-modal/LimitReachedModalProps.js

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

package/lib/module/modules/limit-reached-modal/MODULE.md

@@ -16,6 +16,7 @@ optional usage line, and which action(s) appear.
 | `LimitReachedModal.variants.ts` | Pure resolvers: the `LimitKind` copy table (`resolveLimitReachedCopy`, ported verbatim from web), `formatLimitUsage`, and the themed icon-badge/action-row layout + colour (`resolveLimitReachedModalColors`). No React, no lucide. |
 | `index.ts` | Public surface: `LimitReachedModal`, `LimitReachedModalProps`, `LimitKind`. |
 | `__tests__/LimitReachedModal.test.ts` | Pure: the copy resolver for all six kinds × both admin/member paths, the usage formatter, and WCAG contrast for this module's own colour choices (icon badge, message, usage) — measured for all 9 brands × both modes. |
+| `__tests__/LimitReachedModal.keyboard.web.test.tsx` | Web keyboard: the Escape/Tab-trap/focus-restore contract inherited from `Modal`. |
 | `__tests__/LimitReachedModal.render.test.tsx` | Render: hidden when `visible=false`, the upgrade CTA absent when `canManageBilling=false`, `onUpgrade`/`onRequestClose` wiring, and the usage line appearing only when both `limit` and `used` are given. |
 
 ## Props
@@ -86,9 +87,3 @@ full-screen dialog within.
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). The inline
 `() => onUpgrade?.()` is a fresh closure per render, same as `EmptyState`'s action Button — cheap
 because it forwards straight to a leaf `Pressable`, never a memoized child list item.
-
-## 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.

package/lib/module/modules/list-item/ListItem.js

@@ -6,8 +6,9 @@
 
 import { memo, useMemo } from "react";
 import { Platform, Pressable, StyleSheet, View } from "react-native";
-import Animated, { FadeInDown, ReduceMotion } from "react-native-reanimated";
+import Animated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion } from "react-native-reanimated";
 import { usePressState } from "../../core/motion/usePressState.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { concentric } from "../../core/style/index.js";
 import { rippleColor as androidRippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
@@ -22,6 +23,8 @@ export const ListItem = /*#__PURE__*/memo(function ListItem({
   trailing,
   unread = false,
   onPress,
+  accessibilityLabel,
+  accessibilityState,
   style,
   testID
 }) {
@@ -58,6 +61,10 @@ export const ListItem = /*#__PURE__*/memo(function ListItem({
     backgroundColor: colors.dot
   }], [theme, colors]);
   const bodyStyle = useMemo(() => listItemBodyStructure(theme), [theme]);
+  const slotTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.muted
+  }], [theme]);
   const body = /*#__PURE__*/_jsxs(_Fragment, {
     children: [unread && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-dot`,
@@ -70,7 +77,7 @@ export const ListItem = /*#__PURE__*/memo(function ListItem({
         borderCurve: "continuous",
         overflow: "hidden"
       },
-      children: leading
+      children: renderNodeSlot(leading, slotTextStyle)
     }), /*#__PURE__*/_jsxs(View, {
       style: bodyStyle,
       children: [/*#__PURE__*/_jsx(Text, {
@@ -84,11 +91,13 @@ export const ListItem = /*#__PURE__*/memo(function ListItem({
         numberOfLines: 2,
         children: subtitle
       })]
-    }), trailing]
+    }), renderNodeSlot(trailing, slotTextStyle)]
   });
   if (!pressable) {
     return /*#__PURE__*/_jsx(Animated.View, {
       entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+      exiting: FadeOut.reduceMotion(ReduceMotion.System),
+      layout: LinearTransition.reduceMotion(ReduceMotion.System),
       testID: testID,
       style: baseStyle,
       children: body
@@ -97,7 +106,8 @@ export const ListItem = /*#__PURE__*/memo(function ListItem({
   return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: "button",
-    accessibilityLabel: a11y.accessibilityLabel,
+    accessibilityLabel: accessibilityLabel ?? a11y.accessibilityLabel,
+    accessibilityState: accessibilityState,
     onPress: onPress,
     onPressIn: press.handlers.onPressIn,
     onPressOut: press.handlers.onPressOut,
@@ -105,9 +115,10 @@ export const ListItem = /*#__PURE__*/memo(function ListItem({
     android_ripple: androidRipple,
     style: pressableStyle,
     children: [/*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
       testID: testID === undefined ? undefined : `${testID}-press-overlay`,
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
     }), body]
   });
 });

package/lib/module/modules/list-item/ListItemProps.js

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

package/lib/module/modules/list-item/MODULE.md

@@ -3,8 +3,8 @@
 `ListItem` renders one row for notification lists, inboxes, and settings screens: optional
 `leading`/`trailing` nodes around a title + subtitle column. `unread` adds an `accent.solid` dot
 and a `bg.surface` row emphasis (plus a semibold title) — `bg.surface`, not `bg.selected`, because
-`fg.muted` is only measured AA against surface/hover. A `Pressable` when `onPress` is set uses
-`usePressState` (scale + state-layer overlay on the native driver); a plain `View` otherwise.
+`fg.muted` is only measured AA against surface/hover. With `onPress` the root is a
+`Pressable`; without it, an `Animated.View` (see Motion).
 
 ## Files
 
@@ -15,6 +15,7 @@ and a `bg.surface` row emphasis (plus a semibold title) — `bg.surface`, not `b
 | `index.ts` | Public surface: `ListItem`, `ListItemProps`. |
 | `__tests__/ListItem.test.ts` | Pure: WCAG contrast (all brands × modes) + a11y label contract. |
 | `__tests__/ListItem.render.test.tsx` | Render: unread dot/bg, press, leading/trailing slots. |
+| `__tests__/ListItem.dom.test.tsx` | Real DOM (`jest.web.config.js`). |
 
 ## Props
 
@@ -26,6 +27,8 @@ and a `bg.surface` row emphasis (plus a semibold title) — `bg.surface`, not `b
 | `trailing` | `ReactNode` | — | E.g. a timestamp `Text` or `Badge`. |
 | `unread` | `boolean` | `false` | Accent dot (decorative, hidden from AT — "unread" is announced in the label instead) + `bg.surface` fill. |
 | `onPress` | `() => void` | — | Row becomes a `button`-role Pressable, min 44dp tall. |
+| `accessibilityLabel` | `string` | — | Overrides the default `"title, subtitle, unread?"` label on pressable rows. |
+| `accessibilityState` | `{ disabled?, selected? }` | — | Merged into the pressable row (e.g. `selected` for inbox selection). |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 | `testID` | `string` | — | Also derives the `-dot` sub-id. |
 
@@ -34,19 +37,21 @@ and a `bg.surface` row emphasis (plus a semibold title) — `bg.surface`, not `b
 - Pressable rows carry `accessibilityLabel = "title, subtitle, unread?"` so the dot never has to
   speak for itself; non-pressable rows leave the text nodes in the normal tree.
 - Title/subtitle are measured ≥ 4.5:1 against the canvas, the `bg.surface` unread fill, and the
-  `bg.sunken` pressed fill for all 8 brands × both modes (`ListItem.test.ts`).
+  `bg.sunken` pressed fill for all 9 brands × both modes (`ListItem.test.ts`).
 
 ## Known gaps
 
 - `leading`/`trailing` are `ReactNode` slots (per the generic-row spec) — the nodes' own contrast
   and touch-target concerns belong to the consumer.
 
-## Performance
+## Motion
 
-Wrapped in `React.memo`; the Pressable style function is `useCallback`'d.
+The non-pressable branch is an `Animated.View` with `FadeInDown.springify()` / `FadeOut` and a
+`LinearTransition` layout preset, all `reduceMotion(ReduceMotion.System)`. The pressable branch
+mounts with no entrance — it is the one a `FlatList` recycles mid-scroll — and animates only its
+press feedback (`usePressState`: scale + a `stateLayerScrim` overlay on the native driver).
 
-## Modernization (v1.0.7)
+## Performance
 
-- 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.
+Wrapped in `React.memo`; the colours, accessibility name and both root style arrays are `useMemo`'d,
+so nothing is reallocated per render.