pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/swipeable-row/SwipeableRow.js

@@ -0,0 +1,265 @@
+"use strict";
+
+/**
+ * SwipeableRow — reveals action buttons on horizontal swipe. Built on gesture-handler +
+ * reanimated 4 shared values, so the row follows the finger on the UI thread.
+ *
+ * A swipe is invisible to assistive tech (WCAG 2.1.1), so the same actions are also declared as
+ * `accessibilityActions` on the row itself — the platform-native list-row model, where the row is
+ * one accessibility element carrying custom actions. The trays are the sighted-touch affordance for
+ * that same set, so they stay out of the accessibility tree: they sit behind the content and would
+ * otherwise announce every row's actions ahead of its content, swiped open or not.
+ *
+ * Those two props are native-only — react-native-web implements neither — so each action ALSO
+ * carries an explicit `tabIndex={-1}`: without it a 20-row list costs three Tab presses per row,
+ * two of them landing on a button the content is painted over.
+ */
+
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { cancelAnimation, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import { Icon } from "../../core/icon/index.js";
+import { useMotion } from "../../core/motion/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { useTheme } from "../../theme/hooks.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
+import { Button } from "../button/index.js";
+import { Menu } from "../menu/index.js";
+import { resolveSwipeableActionTone, SWIPE_ACTION_WIDTH, swipeableActionButtonStructure, swipeableActionFocusRingStructure, swipeableActionsStructure, swipeableMoreAffordanceStructure, swipeableRowStructure } from "./SwipeableRow.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+const ICON_SIZE = 18;
+const NO_ACTIONS = [];
+const AnimatedActionPressable = Animated.createAnimatedComponent(Pressable);
+export const SwipeableRow = /*#__PURE__*/memo(function SwipeableRow({
+  children,
+  leftActions = NO_ACTIONS,
+  rightActions = NO_ACTIONS,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const motion = useMotion();
+  const translateX = useSharedValue(0);
+  const leftWidth = leftActions.length * SWIPE_ACTION_WIDTH;
+  const rightWidth = rightActions.length * SWIPE_ACTION_WIDTH;
+  const spring = motion.spring("snappy");
+  const settleMs = motion.duration("fast");
+  const animated = motion.enabled;
+  const settle = useCallback(to => {
+    "worklet";
+
+    if (!animated) {
+      translateX.value = to;
+      return;
+    }
+    translateX.value = spring ? withSpring(to, spring) : withTiming(to, {
+      duration: settleMs
+    });
+  }, [animated, spring, settleMs, translateX]);
+  const pan = useMemo(() => Gesture.Pan().onChange(e => {
+    "worklet";
+
+    const offset = e.translationX;
+    translateX.value = offset > leftWidth ? leftWidth : offset < -rightWidth ? -rightWidth : offset;
+  }).onFinalize(() => {
+    "worklet";
+
+    const openLeft = translateX.value > leftWidth / 2;
+    const openRight = translateX.value < -rightWidth / 2;
+    settle(openLeft ? leftWidth : openRight ? -rightWidth : 0);
+  }), [leftWidth, rightWidth, settle, translateX]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: translateX.value
+    }]
+  }));
+  useEffect(() => () => cancelAnimation(translateX), [translateX]);
+  const actionsById = useMemo(() => {
+    const map = new Map();
+    for (const action of leftActions) map.set(action.id, action);
+    for (const action of rightActions) map.set(action.id, action);
+    return map;
+  }, [leftActions, rightActions]);
+  const runAction = useCallback(id => {
+    settle(0);
+    actionsById.get(id)?.onPress();
+  }, [actionsById, settle]);
+  const accessibilityActions = useMemo(() => [...leftActions, ...rightActions].map(({
+    id,
+    label
+  }) => ({
+    name: id,
+    label
+  })), [leftActions, rightActions]);
+  const handleAccessibilityAction = useCallback(event => {
+    runAction(event.nativeEvent.actionName);
+  }, [runAction]);
+  const hasActions = accessibilityActions.length > 0;
+  const orderedActions = useMemo(() => [...leftActions, ...rightActions], [leftActions, rightActions]);
+  const runSoleAction = useCallback(() => {
+    const sole = orderedActions[0];
+    if (sole) runAction(sole.id);
+  }, [orderedActions, runAction]);
+  const menuItems = useMemo(() => orderedActions.map(action => ({
+    label: action.label,
+    icon: action.icon,
+    tone: action.tone === "danger" ? "danger" : "default",
+    onPress: () => runAction(action.id)
+  })), [orderedActions, runAction]);
+  const moreAffordanceStyle = useMemo(() => swipeableMoreAffordanceStructure(theme), [theme]);
+  const soleActionTestID = testID === undefined ? undefined : `${testID}-more`;
+  const soleActionButton = useMemo(() => orderedActions[0] ? /*#__PURE__*/_jsx(Button, {
+    testID: soleActionTestID,
+    icon: "more-horizontal",
+    variant: "outline",
+    tone: "neutral",
+    size: "sm",
+    accessibilityLabel: orderedActions[0].label,
+    onPress: runSoleAction
+  }) : null, [orderedActions, runSoleAction, soleActionTestID]);
+
+  // Memoized so Menu's own memo isn't defeated by a fresh trigger element every render.
+  const menuTrigger = useMemo(() => /*#__PURE__*/_jsx(Button, {
+    testID: soleActionTestID,
+    icon: "more-horizontal",
+    variant: "outline",
+    tone: "neutral",
+    size: "sm",
+    accessibilityLabel: "More actions"
+  }), [soleActionTestID]);
+  const contentStyle = useMemo(() => [{
+    backgroundColor: theme.colors.bg.surface
+  }, animatedStyle], [theme, animatedStyle]);
+  const leftTrayStyle = useMemo(() => [swipeableActionsStructure(theme), {
+    left: 0,
+    width: leftWidth
+  }], [theme, leftWidth]);
+  const rightTrayStyle = useMemo(() => [swipeableActionsStructure(theme), {
+    right: 0,
+    width: rightWidth
+  }], [theme, rightWidth]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID
+    // A container that isn't `accessible` reaches neither the iOS trait nor Android's focus.
+    ,
+    accessible: hasActions ? true : undefined,
+    accessibilityActions: hasActions ? accessibilityActions : undefined,
+    onAccessibilityAction: hasActions ? handleAccessibilityAction : undefined,
+    style: [swipeableRowStructure(theme), style],
+    children: [leftActions.length > 0 && /*#__PURE__*/_jsx(View, {
+      style: leftTrayStyle,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: leftActions.map(action => /*#__PURE__*/_jsx(SwipeableAction, {
+        action: action,
+        theme: theme,
+        onRun: runAction,
+        testID: testID === undefined ? undefined : `${testID}-action-${action.id}`
+      }, action.id))
+    }), rightActions.length > 0 && /*#__PURE__*/_jsx(View, {
+      style: rightTrayStyle,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: rightActions.map(action => /*#__PURE__*/_jsx(SwipeableAction, {
+        action: action,
+        theme: theme,
+        onRun: runAction,
+        testID: testID === undefined ? undefined : `${testID}-action-${action.id}`
+      }, action.id))
+    }), /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: pan,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: contentStyle,
+        children: children
+      })
+    }), hasActions &&
+    /*#__PURE__*/
+    // The single-pointer alternative to the swipe (WCAG 2.5.7) — always visible whenever
+    // actions exist, never gated behind an opt-out. Hidden from the accessibility tree: the
+    // row's `accessibilityActions` above already give AT users the identical set via the
+    // rotor/menu, so exposing this too would be a second, differently-shaped path to the same
+    // actions rather than a needed one. See MODULE.md "Tap affordance" for the full reasoning.
+    _jsx(View, {
+      testID: testID === undefined ? undefined : `${testID}-more-affordance`,
+      pointerEvents: "box-none",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: moreAffordanceStyle,
+      children: orderedActions.length === 1 ? soleActionButton : /*#__PURE__*/_jsx(Menu, {
+        testID: testID === undefined ? undefined : `${testID}-more-menu`,
+        items: menuItems,
+        trigger: menuTrigger
+      })
+    })]
+  });
+});
+const SwipeableAction = /*#__PURE__*/memo(function SwipeableAction({
+  action,
+  theme,
+  onRun,
+  testID
+}) {
+  const colors = useMemo(() => resolveSwipeableActionTone(theme.colors, action.tone ?? "accent"), [theme, action.tone]);
+  const [focused, setFocused] = useState(false);
+  const press = usePressState(false);
+  const handlePress = useCallback(() => onRun(action.id), [onRun, action.id]);
+  const handleFocus = useCallback(() => setFocused(true), []);
+  const handleBlur = useCallback(() => setFocused(false), []);
+  const buttonStyle = useMemo(() => [swipeableActionButtonStructure(theme), {
+    backgroundColor: colors.fill
+  }], [theme, colors.fill]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+    fontSize: theme.fontSizes.xs,
+    color: colors.text
+  }], [theme, colors.text]);
+  const focusRingStyle = useMemo(() => [swipeableActionFocusRingStructure(theme), {
+    borderColor: theme.colors.border.focus
+  }], [theme]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode)
+  }), [theme.mode]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
+  return /*#__PURE__*/_jsxs(AnimatedActionPressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: action.label
+    // RNW ignores the tray's a11y-hiding props, so this stays a reachable tab stop otherwise.
+    ,
+    tabIndex: -1,
+    onPress: handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    android_ripple: androidRipple,
+    style: [buttonStyle, styles.overflowHidden, press.animatedStyle],
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), focused && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      testID: testID === undefined ? undefined : `${testID}-focus-ring`,
+      style: focusRingStyle
+    }), action.icon ? /*#__PURE__*/_jsx(Icon, {
+      name: action.icon,
+      size: ICON_SIZE,
+      color: colors.text,
+      strokeWidth: ICON_STROKE
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      style: labelStyle,
+      children: action.label
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  overflowHidden: {
+    overflow: "hidden"
+  }
+});
+//# sourceMappingURL=SwipeableRow.js.map

package/lib/module/modules/swipeable-row/SwipeableRow.variants.js

@@ -0,0 +1,80 @@
+"use strict";
+
+import { createThemedVariants } from "../../core/style/index.js";
+export function resolveSwipeableActionTone(colors, tone) {
+  if (tone === "accent") {
+    return {
+      fill: colors.accent.solid,
+      text: colors.accent.onSolid
+    };
+  }
+  if (tone === "neutral") {
+    return {
+      fill: colors.bg.sunken,
+      text: colors.fg.default
+    };
+  }
+  const status = colors.status[tone];
+  return {
+    fill: status.solid,
+    text: status.onSolid
+  };
+}
+export const swipeableRowStructure = createThemedVariants(_theme => ({
+  base: {
+    overflow: "hidden"
+  }
+}));
+export const swipeableActionsStructure = createThemedVariants(_theme => ({
+  base: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    flexDirection: "row",
+    alignItems: "center"
+  }
+}));
+export const swipeableActionButtonStructure = createThemedVariants(theme => ({
+  base: {
+    minWidth: 72,
+    paddingHorizontal: theme.space[3],
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100%"
+  }
+}));
+
+/**
+ * The keyboard/AT focus ring for one action button. Drawn INSIDE the button's own bounds, not as the
+ * gap-outside ring `Button`/`CopyButton` use: `swipeableRowStructure` clips to `overflow: "hidden"`,
+ * so an outset ring on the outermost action would be cut off by the row itself. Its colour is
+ * applied inline over this, never hardcoded here.
+ */
+export const swipeableActionFocusRingStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: theme.borderWidths.thick
+  }
+}));
+export const SWIPE_ACTION_WIDTH = 72;
+
+/**
+ * The always-visible tap affordance (WCAG 2.5.7 / 2.5.1): trailing edge, vertically centered, on
+ * top of `children` — it does not reflow consumer content, since `children` is opaque to this
+ * component. `pointerEvents: "box-none"` on the wrapping node (applied at the component, not here)
+ * keeps the rest of the row's width free for the pan gesture underneath.
+ */
+export const swipeableMoreAffordanceStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    right: theme.space[2],
+    justifyContent: "center"
+  }
+}));
+//# sourceMappingURL=SwipeableRow.variants.js.map

package/lib/module/modules/swipeable-row/index.js

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

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

@@ -42,6 +42,14 @@ nothing to close a union over.
 - `accessibilityRole="switch"`, `accessibilityState={{ checked: value, disabled }}` — RN's own
   `Switch` defaults the role but never sets `checked` itself, so `resolveSwitchAccessibility` sets
   both explicitly rather than relying on the native default.
+- **Deliberately the ONE control in the form family that keeps the OBJECT form.** Every sibling
+  (Checkbox, RadioGroup, Slider, …) moved to flat `aria-*` because react-native-web drops the object
+  — but `Switch` is a native primitive, not a `View`/`Pressable`: RN's `Switch.js` reads
+  `accessibilityState` and never destructures any `aria-*` prop, and `react-native-web` renders a
+  real `<input type="checkbox" role="switch" checked>` whose state comes from the `value` prop
+  directly, not from any accessibility prop at all. A flat `aria-checked` would land on the
+  wrapper `<div>` — an element with no role, where it's meaningless. Proven on the real DOM by
+  `__tests__/Switch.dom.test.tsx`.
 - **2.3.3 (reduced motion)** — N/A. This module adds no JS-driven animation; the thumb slide is
   native platform animation this wrapper doesn't control (unlike `Button`'s own press-fade).
 
@@ -63,3 +71,11 @@ None.
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Its only child is RN's own `<Switch>` (host-level primitive) — nothing to memoize.
+
+## 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.
+
+Toggle uses `usePressState` and `useHaptics().selection()` on press.

package/lib/module/modules/switch/Switch.js

@@ -7,9 +7,10 @@
  * to RN — which is also why there is no `size` prop.
  */
 
-import { memo } from "react";
+import { memo, useCallback } from "react";
 import { Switch as RNSwitch } from "react-native";
-import { useThemeColors } from "../../theme/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
+import { useThemeColors } from "../../theme/hooks.js";
 import { resolveSwitchAccessibility, resolveSwitchColors, SWITCH_HIT_SLOP } from "./Switch.variants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Switch = /*#__PURE__*/memo(function Switch({
@@ -23,6 +24,7 @@ export const Switch = /*#__PURE__*/memo(function Switch({
   // `trackColor`/`thumbColor` accept no token object — the same raw-string escape hatch as
   // `placeholderTextColor` — so colour is resolved via `useThemeColors()`, not `useTheme().colors`.
   const colors = useThemeColors();
+  const haptics = useHaptics();
   const {
     trackOff,
     trackOn,
@@ -32,10 +34,14 @@ export const Switch = /*#__PURE__*/memo(function Switch({
     value,
     disabled
   });
+  const handleValueChange = useCallback(next => {
+    haptics.selection();
+    onValueChange(next);
+  }, [haptics, onValueChange]);
   return /*#__PURE__*/_jsx(RNSwitch, {
     testID: testID,
     value: value,
-    onValueChange: onValueChange,
+    onValueChange: handleValueChange,
     disabled: disabled,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: accessibilityLabel,

package/lib/module/modules/switch/Switch.variants.js

@@ -28,6 +28,14 @@ export function resolveSwitchColors(colors) {
  * RN's own `<Switch>` defaults `accessibilityRole` to `"switch"` but never sets
  * `accessibilityState.checked` itself (only `disabled` is merged in, on Android) — so this module
  * sets both explicitly, kept pure so the contract is testable without rendering React Native.
+ *
+ * The ONE control in the form family that keeps the OBJECT form. `Switch` is a native primitive, not
+ * a `View`/`Pressable`: RN's `Switch.js` reads `accessibilityState` and spreads everything else
+ * straight onto the platform view, which has no idea what `aria-checked` is — so a flat prop would
+ * announce nothing natively. Web needs nothing either: `react-native-web` renders a real
+ * `<input type="checkbox" role="switch" checked>`, so the DOM already carries the state, and a flat
+ * `aria-checked` would land on the wrapper `<div>` — an element with no role, where the attribute is
+ * not allowed. Object on native, native input on web; no flat form belongs here.
  */
 export function resolveSwitchAccessibility(input) {
   return {

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

@@ -8,7 +8,7 @@ from panel content and keeping this component simple and composable.
 
 | File | Role |
 |------|------|
-| `Tabs.tsx` | The component. Strip + per-tab composition, press wiring, a11y wiring, the indicator's layout measurement + animation. |
+| `Tabs.tsx` | The component. Strip + per-tab composition (private memo'd `TabStripItem`), press wiring, a11y wiring, the indicator's layout measurement + animation. |
 | `Tabs.variants.ts` | Pure resolvers (`TABS_SIZES`, `resolveTabsColors`, `resolveTabAccessibility`) + the themed structural resolvers (`tabsStripStructure`, `tabItemStructure`, `tabsIndicatorStructure`). No React, no lucide. |
 | `index.ts` | Public surface: `Tabs`, `TabsProps`, `TabItem`, `TabsSize`, `IconName` (re-exported from `core/icon`). |
 | `__tests__/Tabs.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
@@ -23,7 +23,7 @@ from panel content and keeping this component simple and composable.
 | `onValueChange` | `(value: string) => void` | — | Fires with the pressed tab's `value`. |
 | `size` | `sm \| md \| lg` | `md` | 36 / 44 / 52 dp visual height; `sm` reaches 44 via `hitSlop`. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost (the container `View`), applied exactly once, last. |
-| `testID` | `string` | — | Container's testID; each tab gets `` `${testID}-${item.value}` ``, and the indicator gets `` `${testID}-indicator` ``, when set. |
+| `testID` | `string` | — | Container's testID; each tab gets `` `${testID}-${item.value}` `` (and `` `-focus-ring` `` under it while focused), and the indicator gets `` `${testID}-indicator` ``, when set. |
 
 No per-item `disabled` and no `tone` — every active label + indicator is the same accent role,
 every inactive label is the same neutral `fg.muted`. Same reasoning as `RadioGroup`: a single-
@@ -31,9 +31,13 @@ purpose control has no closed union of appearances to resolve.
 
 ## Accessibility contract (WCAG)
 
-- **4.1.2** — `accessibilityRole="tablist"` on the container, `"tab"` per item with
-  `accessibilityState={ selected }`. Both are real, recognised RN `AccessibilityRole` values — no
-  fallback needed on this RN version (same precedent as `RadioGroup`'s `"radiogroup"`).
+- **4.1.2** — `accessibilityRole="tablist"` on the container, `"tab"` per item with flat
+  `aria-selected={ selected }`. Both are real, recognised RN `AccessibilityRole` values — no
+  fallback needed on this RN version (same precedent as `RadioGroup`'s `"radiogroup"`). The flat
+  prop, never `accessibilityState={{ selected }}`: react-native-web's `createDOMProps` allowlist is
+  flat and silently drops the object form, so a tab never announced as selected on web — see
+  `docs/PLATFORM-A11Y-PROPS.md`. React Native itself accepts the flat prop natively and merges it
+  into `accessibilityState`, so this is a strict superset, not a native regression.
 - **2.5.x target size** — every size reaches ≥ 44 dp: `sm`'s 36 dp tab grows via `hitSlop`; `md`/
   `lg` are already ≥ 44 dp.
 - **1.4.3** — the active label is `accent.text`, the inactive label is `fg.muted`, both measured
@@ -45,16 +49,37 @@ purpose control has no closed union of appearances to resolve.
   brand × mode.
 - **1.4.11** — the indicator bar (`accent.solid`) is a non-text UI marker, measured ≥ 3:1 against
   the canvas for every brand × mode.
-- **2.3.3** — the indicator's movement is two `Animated.Value`s (`x`, `width`) driven off each
-  tab's own `onLayout` measurement. Under reduced motion they're set with `setValue` (an instant
-  snap) instead of `Animated.timing` (which would still tween through intermediate frames even at
-  `duration: 0` for a position **and** size change together) — verified in the render tests by
-  spying on `Animated.timing` and asserting it isn't called when reduced motion is on.
+- **2.4.7** — the focused tab draws a `border.focus` ring (`${testID}-focus-ring`), the same
+  treatment `BottomNavTab` uses. The indicator bar is **not** it: that marks selection and moves
+  only on press, so without the ring an external keyboard moved focus across the strip with nothing
+  on screen changing. The ring is drawn *inside* the tab's bounds — the strip's `columnGap` is one
+  space step, so a gap-outside ring (`Button`/`CopyButton`) would sit on top of the next tab.
+- **2.3.3** — the indicator's movement is two `Animated.Value`s (`translateX`, `scaleX`) driven off
+  each tab's own `onLayout` measurement. When `useMotion().enabled` is false (reduced motion or the
+  global kill switch) they're set with `setValue` (an instant snap) instead of tweening — verified
+  in the render tests by spying on `Animated.timing` and asserting it isn't called. Tab presses use
+  `usePressState` (scale + state-layer overlay).
+
+## Indicator motion (transform-only, native driver)
+
+The indicator is a **1dp-wide bar** (`TABS_INDICATOR_UNIT_WIDTH`) stretched by an animated `scaleX`
+and positioned by an animated `translateX`. It previously animated `left`/`width`, which forces
+`useNativeDriver: false` and a layout pass per frame; only `opacity`/`transform` can run on the
+native driver, so the strip now animates entirely off the JS thread.
+
+Geometry: RN scales around the element's centre, so for a tab measured at `{x, width}` the targets
+are `translateX = x + width / 2 - 0.5` and `scaleX = width`. The structural resolver carries **no**
+`borderRadius` — a radius is applied before the transform, so `scaleX` would smear a 0.5dp round end
+into a lens the full width of the tab. At 2dp thick, square ends are indistinguishable from the
+previous `radii.full` pill.
+
+Duration and easing come from `core/motion` (`useMotion().timing`, `normal`) — no timing constant
+lives in this module. The in-flight animation is stopped on effect cleanup and on unmount.
 
 ## Patterns (copied from Button / RadioGroup)
 
 1. **Structure vs colour split.** Strip gap, tab height/padding/gap, and the indicator's
-   thickness/radius are `createThemedVariants` (registered once per `(theme, size)`); colour is
+   thickness/unit width are `createThemedVariants` (registered once per `(theme, size)`); colour is
    resolved by `resolveTabsColors` from role tokens and applied inline over the structural style.
 2. **Pure, testable resolvers** in `Tabs.variants.ts` (no React) so the WCAG + behaviour contract
    is unit-tested against the real palettes — never eyeballed.
@@ -66,7 +91,7 @@ purpose control has no closed union of appearances to resolve.
 
 ## Known gaps
 
-- The indicator starts at `x: 0, width: 0` until the active tab's first `onLayout` fires (native
+- The indicator starts at `translateX: 0, scaleX: 0` (invisible) until the active tab's first `onLayout` fires (native
   layout is asynchronous), so there's a single frame before its true position is known. No visible
   flash in practice — RN fires `onLayout` before the first paint completes — but it's worth noting
   since it isn't unit-tested (RNTL's test renderer never calls `onLayout` on its own; the render
@@ -77,4 +102,14 @@ purpose control has no closed union of appearances to resolve.
 
 ## Performance
 
-Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). The `items.map()` renders host `Pressable`/`Text`, and the one library child, `Icon`, only receives primitive props — nothing to memoize. The pre-existing `handleTabLayout` was already correctly `useCallback`'d.
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Each tab is a
+private, memo'd `TabStripItem`: the strip passes primitives plus the two stable callbacks
+(`onValueChange`, `handleTabLayout`), and the item builds its own press/layout handlers and style
+arrays, so a selection change re-renders the two affected tabs rather than the whole strip. The
+indicator's structural style, the root style array and the resolved colours are memoized.
+
+## 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.