pixelize-native-library 1.2.0 → 1.3.0

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,8 +41,11 @@ 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
-rows' targets never overlap.
+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
+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.

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

@@ -6,10 +6,12 @@
  */
 
 import { memo, useCallback, useMemo, useRef, useState } from "react";
-import { Animated, FlatList, 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";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { Button } from "../button/Button.js";
 import { Modal } from "../modal/Modal.js";
 import { IMAGE_VIEWER_PAGE_PADDING } from "./ImageViewer.variants.js";
@@ -105,16 +107,22 @@ export const ImageViewer = /*#__PURE__*/memo(function ImageViewer({
     testID: testID ? `${testID}-page-${item.id}` : undefined
   }), [pageStyle, testID]);
   const activeBorder = theme.colors.accent.solid;
+  const thumbCount = imageItems.length;
   const renderThumb = useCallback(({
-    item
+    item,
+    index
   }) => /*#__PURE__*/_jsx(ImageViewerThumb, {
     id: item.id,
     uri: item.thumbUri ?? item.uri,
+    label: item.label,
+    position: index + 1,
+    total: thumbCount,
     active: item.id === currentId,
     activeBorder: activeBorder,
+    mode: theme.mode,
     onPress: handleThumbPress,
     testID: testID ? `${testID}-thumb-${item.id}` : undefined
-  }), [currentId, activeBorder, handleThumbPress, testID]);
+  }), [currentId, activeBorder, theme.mode, thumbCount, handleThumbPress, testID]);
   const bodyStyle = useMemo(() => ({
     gap: theme.space[3]
   }), [theme]);
@@ -125,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, {
@@ -180,8 +188,12 @@ const ImageViewerPage = /*#__PURE__*/memo(function ImageViewerPage({
 const ImageViewerThumb = /*#__PURE__*/memo(function ImageViewerThumb({
   id,
   uri,
+  label,
+  position,
+  total,
   active,
   activeBorder,
+  mode,
   onPress,
   testID
 }) {
@@ -189,9 +201,25 @@ const ImageViewerThumb = /*#__PURE__*/memo(function ImageViewerThumb({
   const thumbStyle = useMemo(() => [styles.thumb, active ? {
     borderColor: activeBorder,
     borderWidth: 2
-  } : null], [active, activeBorder]);
+  } : styles.thumbInactive], [active, activeBorder]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(mode),
+    borderless: false
+  } : undefined, [mode]);
+  // Border colour alone isn't a reliable selection cue (colour-blind users, low-vision) — the
+  // dimmed opacity on unselected thumbs is the redundant, non-colour signal (WCAG 1.4.1).
+  const imageStyle = useMemo(() => [styles.thumbImage, {
+    opacity: active ? 1 : 0.6
+  }], [active]);
+  const accessibilityLabel = label ? `${label}, image ${position} of ${total}` : `Image ${position} of ${total}`;
   return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      selected: active
+    },
     onPress: handlePress,
+    android_ripple: androidRipple,
     style: thumbStyle,
     children: /*#__PURE__*/_jsx(MediaImage, {
       testID: testID,
@@ -200,7 +228,7 @@ const ImageViewerThumb = /*#__PURE__*/memo(function ImageViewerThumb({
       },
       contentFit: "cover",
       recyclingKey: uri,
-      style: styles.thumbImage
+      style: imageStyle
     })
   });
 });
@@ -227,6 +255,9 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     overflow: "hidden"
   },
+  thumbInactive: {
+    borderWidth: 0
+  },
   thumbImage: {
     width: "100%",
     height: "100%"

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.
 
@@ -9,6 +9,12 @@ Modal image gallery with paging and thumbnails. Heavy module — subpath only.
   affordance is the backdrop, so on that branch a keyboard user previously had no way to close it at
   all. No keyboard code lives here — `__tests__/ImageViewer.keyboard.web.test.tsx` asserts the
   inheritance.
+- **Thumbnail strip (1.3.1 / 1.4.1 / 4.1.2)** — each `ImageViewerThumb` carries
+  `accessibilityRole="button"`, `accessibilityState={{ selected: active }}`, and an
+  `accessibilityLabel` built from the item's own `label` plus its position ("Photo, image 2 of 5"),
+  never a bare unlabelled tap target. The active thumb is also marked by a dimmed opacity on every
+  OTHER thumb, not by `activeBorder` colour alone — a colour-blind or low-vision user can tell which
+  image is open without relying on hue.
 
 ## Motion contract
 

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

@@ -10,16 +10,17 @@
  * fades in and out. Both honour reduce-motion through `useMotion()`.
  */
 
-import { memo, useCallback, useEffect, useId, useMemo, useRef } from "react";
-import { Animated, Platform, StyleSheet, Text, TextInput, View } from "react-native";
+import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+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,
@@ -33,14 +34,22 @@ 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);
   const spec = INPUT_SIZES[size];
   const statusColors = resolveInputStatus(theme.colors, status);
   const a11y = resolveInputAccessibility({
@@ -64,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, {
@@ -78,9 +90,15 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
   }, [motion, ringOpacity]);
   useEffect(() => () => ringAnimation.current?.stop(), []);
   const handleFocus = useCallback(() => {
-    if (!disabled) setRingVisible(true);
+    if (!disabled) {
+      setFocused(true);
+      setRingVisible(true);
+    }
   }, [disabled, setRingVisible]);
-  const handleBlur = useCallback(() => setRingVisible(false), [setRingVisible]);
+  const handleBlur = useCallback(() => {
+    setFocused(false);
+    setRingVisible(false);
+  }, [setRingVisible]);
   const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
     fontSize: theme.fontSizes.sm,
     color: theme.colors.fg.default,
@@ -88,9 +106,13 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
   }], [theme]);
   const fieldStyle = useMemo(() => [inputStructure(theme, {
     size
-  }), {
+  }), focused ? {
+    borderWidth: 2,
+    borderColor: theme.colors.accent.solid,
+    backgroundColor: withAlpha(theme.colors.accent.solid, 0.04)
+  } : {
     borderColor: statusColors.border
-  }, disabled && styles.dimmed], [theme, size, statusColors.border, disabled]);
+  }, disabled && styles.dimmed], [theme, size, statusColors.border, disabled, focused]);
   const focusRingStyle = useMemo(() => ({
     position: "absolute",
     top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
@@ -99,7 +121,8 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
     bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
     borderWidth: FOCUS_RING_WIDTH,
     borderColor: theme.colors.border.focus,
-    borderRadius: theme.radii.base + FOCUS_RING_GAP + FOCUS_RING_WIDTH
+    borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+    borderCurve: "continuous"
   }), [theme]);
   const inputTextStyle = useMemo(() => [{
     flex: 1,
@@ -113,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 &&
@@ -132,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.muted,
+        placeholderTextColor: theme.colors.fg.placeholder,
         secureTextEntry: secureTextEntry,
+        maxLength: maxLength,
         autoComplete: autoComplete,
         importantForAutofill: autoComplete === "off" ? "no" : undefined,
         editable: a11y.editable,
@@ -157,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
@@ -28,22 +27,22 @@ const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2)
  */
 export const INPUT_SIZES = {
   sm: {
-    height: 32,
+    height: 44,
     fontSize: 14,
     iconSize: 16,
-    hitSlop: slopFor(32)
+    hitSlop: slopFor(44)
   },
   md: {
-    height: 40,
+    height: 52,
     fontSize: 16,
     iconSize: 18,
-    hitSlop: slopFor(40)
+    hitSlop: slopFor(52)
   },
   lg: {
-    height: 48,
+    height: 56,
     fontSize: 18,
     iconSize: 20,
-    hitSlop: slopFor(48)
+    hitSlop: slopFor(56)
   }
 };
 /**
@@ -110,7 +109,8 @@ export const inputStructure = createThemedVariants(theme => ({
     flexDirection: "row",
     alignItems: "center",
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     columnGap: theme.space[2]
   },
   variants: {

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,18 +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.

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.