pixelize-native-library 1.0.7 → 1.2.0

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

@@ -8,11 +8,12 @@ no `onStepPress` — a small surface per spec, not a step navigator.
 
 | File | Role |
 |------|------|
-| `Stepper.tsx` | The component. Composition + a11y wiring only — no press/focus/animation logic. |
+| `Stepper.tsx` | The component + the private memo'd `StepColumn`. Composition, a11y wiring, and the step-advance settle. No press/focus logic. |
 | `Stepper.variants.ts` | Pure resolvers (`resolveStepState`, `resolveStepCircleColors`, `resolveStepLabelColor`, `resolveStepConnectorColor`, `resolveStepperAccessibility`) + the structural variant resolvers `stepCircleStructure`, `stepLabelStructure`, `stepConnectorLineStructure`. No React, no lucide. |
 | `index.ts` | Public surface: `Stepper`, `StepperProps`, `StepperStep`. |
 | `__tests__/Stepper.test.ts` | Pure: state arithmetic, WCAG contrast (all brands × modes), accessibility-summary contract. |
 | `__tests__/Stepper.render.test.tsx` | Render: labels/numbers render, single collapsed `progressbar` node, per-state circle colour, consumer `style` applies last. |
+| `__tests__/Stepper.motion.test.tsx` | Motion: the reduce-motion snap, the real advance pulse, and the no-replay guard below. |
 
 ## Props
 
@@ -48,8 +49,10 @@ both halves from the same function so they always agree.
 - **4.1.2** — the whole row is ONE accessible node (`accessible` on the container), same collapsing
   idiom `Badge` uses for its icon + label: a screen reader gets a single summary announcement
   instead of reading every circle and label individually.
-- `accessibilityRole="progressbar"`, `accessibilityValue={{ min: 0, max: steps.length - 1, now:
-  activeStep }}` — the raw 0-indexed progress triple (floors `max` at 0 for a single-step stepper).
+- `accessibilityRole="progressbar"`, flat `aria-valuemin={0} aria-valuemax={steps.length - 1}
+  aria-valuenow={activeStep}` — the raw 0-indexed progress triple (floors `max` at 0 for a
+  single-step stepper). Flat, not `accessibilityValue={{…}}` — react-native-web 0.21.2 forwards only
+  the flat form to the DOM; the object reaches nothing there.
 - `accessibilityLabel` is a natural-language summary, e.g. `"Step 2 of 4: Shipping"` — the 1-based
   ordinal plus the active step's label (omits the `: <label>` suffix, never a dangling colon, if
   `activeStep` has no matching step).
@@ -61,8 +64,23 @@ both halves from the same function so they always agree.
   — same reasoning `Divider.variants.ts` documents for its own decorative hairline: it conveys no
   information the numbered circles don't already carry, so WCAG 1.4.11 (which binds only a "User
   Interface Component" or a required "Graphical Object") does not apply to it.
-- No touch target / `hitSlop`, no focus ring, no reduced-motion handling — Stepper is
-  non-interactive (no `Pressable`) and has no animation to suppress, same as `Badge`/`Divider`.
+- No touch target / `hitSlop` and no focus ring — Stepper is non-interactive (no `Pressable`), same
+  as `Badge`/`Divider`.
+- **2.3.3** — the step-advance settle is skipped and the final scale `setValue`'d whenever
+  `useMotion().enabled` is false (reduced motion or the global kill switch).
+
+## Step-advance motion
+
+Advancing `activeStep` settles the newly-active circle from `scale: 1.12` to `1` (`core/motion`,
+`fast` + `decelerate`). ONE shared `Animated.Value` lives on `Stepper` and is handed only to the
+active column — never one value per step. The connectors are deliberately static: they change
+`backgroundColor`, which cannot run on the native driver. Stopped on effect cleanup (both branches
+return the same cleanup) and on unmount.
+
+**Only a real `activeStep` change settles.** `motion` is an effect dep, so the effect also re-runs
+when the OS reduce-motion setting flips mid-session — a `lastStep` ref makes that (and the first
+mount, where arriving on a step is not an advance) a no-op `setValue(1)` instead of replaying a
+settle for a step the user never left.
 
 ## Patterns copied from Button (the reference module) and Badge
 
@@ -85,4 +103,13 @@ both halves from the same function so they always agree.
 
 ## Performance
 
-Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). The `steps.map()` renders host `View`/`Text` directly, no library child component — nothing to memoize.
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Each step is a
+private, memo'd `StepColumn` fed primitives only, so advancing a step re-renders the two affected
+columns rather than the whole row; every style array it builds is memoized, and the row's static
+layout lives in `StyleSheet.create`.
+
+## 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/stepper/Stepper.js

@@ -11,13 +11,75 @@
  * length; the connector to the NEXT step is drawn as two identically-coloured halves — the trailing
  * half of this column, the leading half of the next — so a circle stays centered under its own
  * label rather than centered between two circles' worth of connector.
+ *
+ * Advancing `activeStep` settles the newly-active circle with a small scale (`core/motion`). One
+ * shared `Animated.Value` drives it — the connectors change colour, which cannot run on the native
+ * driver, so they stay static.
  */
 
-import { memo } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { useTheme } from "../../theme/index.js";
+import { memo, useEffect, useMemo, useRef } from "react";
+import { Animated, StyleSheet, Text, View } from "react-native";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { resolveStepCircleColors, resolveStepConnectorColor, resolveStepLabelColor, resolveStepState, resolveStepperAccessibility, stepCircleStructure, stepConnectorLineStructure, stepLabelStructure } from "./Stepper.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ADVANCE_SCALE = 1.12;
+const StepColumn = /*#__PURE__*/memo(function StepColumn({
+  index,
+  label,
+  theme,
+  circleFill,
+  circleText,
+  labelColor,
+  leadingConnector,
+  trailingConnector,
+  advance,
+  testID
+}) {
+  const leadingStyle = useMemo(() => [stepConnectorLineStructure(), {
+    backgroundColor: leadingConnector
+  }], [leadingConnector]);
+  const trailingStyle = useMemo(() => [stepConnectorLineStructure(), {
+    backgroundColor: trailingConnector
+  }], [trailingConnector]);
+  const circleStyle = useMemo(() => [stepCircleStructure(theme), {
+    backgroundColor: circleFill
+  }, advance === null ? null : {
+    transform: [{
+      scale: advance
+    }]
+  }], [theme, circleFill, advance]);
+  const numberStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+    fontSize: theme.fontSizes.sm,
+    color: circleText
+  }], [theme, circleText]);
+  const labelStyle = useMemo(() => [stepLabelStructure(theme), theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize: theme.fontSizes.xs,
+    color: labelColor
+  }], [theme, labelColor]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.column,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.connectorRow,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: leadingStyle
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        testID: testID,
+        style: circleStyle,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: numberStyle,
+          children: index + 1
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: trailingStyle
+      })]
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: labelStyle,
+      children: label
+    })]
+  });
+});
 export const Stepper = /*#__PURE__*/memo(function Stepper({
   steps,
   activeStep,
@@ -25,59 +87,66 @@ export const Stepper = /*#__PURE__*/memo(function Stepper({
   testID
 }) {
   const theme = useTheme();
+  const motion = useMotion();
   const a11y = resolveStepperAccessibility({
     steps,
     activeStep
   });
   const lastIndex = steps.length - 1;
+  const advance = useAnimatedValue(1);
+  const running = useRef(null);
+  const lastStep = useRef(null);
+  useEffect(() => {
+    running.current?.stop();
+    const previous = lastStep.current;
+    lastStep.current = activeStep;
+    // `motion` is a dep, so a mid-session reduce-motion change re-runs this — neither that nor the
+    // first render is an advance, and re-pulsing a step the user never left would be a lie.
+    if (!motion.enabled || previous === null || previous === activeStep) {
+      advance.setValue(1);
+    } else {
+      advance.setValue(0);
+      running.current = motion.timing(advance, 1, {
+        duration: "fast",
+        easing: "decelerate"
+      });
+      running.current.start();
+    }
+    return () => running.current?.stop();
+  }, [activeStep, motion, advance]);
+  useEffect(() => () => running.current?.stop(), []);
+  const advanceScale = useMemo(() => advance.interpolate({
+    inputRange: [0, 1],
+    outputRange: [ADVANCE_SCALE, 1]
+  }), [advance]);
+  const rootStyle = useMemo(() => [styles.row, style], [style]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     accessible: true,
     accessibilityRole: a11y.accessibilityRole,
-    accessibilityValue: a11y.accessibilityValue,
+    "aria-valuemin": a11y["aria-valuemin"],
+    "aria-valuemax": a11y["aria-valuemax"],
+    "aria-valuenow": a11y["aria-valuenow"],
     accessibilityLabel: a11y.accessibilityLabel,
-    style: [styles.row, style],
+    style: rootStyle,
     children: steps.map((step, index) => {
       const state = resolveStepState(index, activeStep);
       const circleColors = resolveStepCircleColors(theme.colors, state);
-      const labelColor = resolveStepLabelColor(theme.colors, state);
       // No segment exists before the first circle or after the last — a transparent spacer keeps
       // every circle centered in its column via the same left/right flex split as every other one.
       const leadingConnector = index === 0 ? "transparent" : resolveStepConnectorColor(theme.colors, index - 1, activeStep);
       const trailingConnector = index === lastIndex ? "transparent" : resolveStepConnectorColor(theme.colors, index, activeStep);
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.column,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.connectorRow,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [stepConnectorLineStructure(), {
-              backgroundColor: leadingConnector
-            }]
-          }), /*#__PURE__*/_jsx(View, {
-            testID: testID === undefined ? undefined : `${testID}-circle-${index}`,
-            style: [stepCircleStructure(theme), {
-              backgroundColor: circleColors.fill
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-                fontSize: theme.fontSizes.sm,
-                color: circleColors.text
-              }],
-              children: index + 1
-            })
-          }), /*#__PURE__*/_jsx(View, {
-            style: [stepConnectorLineStructure(), {
-              backgroundColor: trailingConnector
-            }]
-          })]
-        }), /*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
-          style: [stepLabelStructure(theme), theme.fontStyleForWeight(theme.fontWeights.medium), {
-            fontSize: theme.fontSizes.xs,
-            color: labelColor
-          }],
-          children: step.label
-        })]
+      return /*#__PURE__*/_jsx(StepColumn, {
+        index: index,
+        label: step.label,
+        theme: theme,
+        circleFill: circleColors.fill,
+        circleText: circleColors.text,
+        labelColor: resolveStepLabelColor(theme.colors, state),
+        leadingConnector: leadingConnector,
+        trailingConnector: trailingConnector,
+        advance: index === activeStep ? advanceScale : null,
+        testID: testID === undefined ? undefined : `${testID}-circle-${index}`
       }, index);
     })
   });

package/lib/module/modules/stepper/Stepper.variants.js

@@ -87,7 +87,9 @@ export function resolveStepConnectorColor(colors, index, activeStep) {
  * wording is unit-tested without a renderer; `Stepper.tsx` pairs this with `accessible` on the
  * container, the same collapsing idiom `Badge` uses for its icon + label). `activeStep` is
  * 0-indexed internally; the announcement surfaces the natural 1-based ordinal, and
- * `accessibilityValue` surfaces the raw 0-indexed `min`/`max`/`now` progress triple.
+ * the flat `aria-value*` triple surfaces the raw 0-indexed `min`/`max`/`now` progress. Flat rather
+ * than `accessibilityValue={{…}}`: RN's `View` folds the flat props back into that object, while
+ * react-native-web forwards only the flat form — the object reaches nothing at all on web.
  */
 export function resolveStepperAccessibility(input) {
   const {
@@ -98,11 +100,9 @@ export function resolveStepperAccessibility(input) {
   const summary = `Step ${activeStep + 1} of ${steps.length}` + (activeLabel === undefined ? "" : `: ${activeLabel}`);
   return {
     accessibilityRole: "progressbar",
-    accessibilityValue: {
-      min: 0,
-      max: Math.max(steps.length - 1, 0),
-      now: activeStep
-    },
+    "aria-valuemin": 0,
+    "aria-valuemax": Math.max(steps.length - 1, 0),
+    "aria-valuenow": activeStep,
     accessibilityLabel: summary
   };
 }

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

@@ -0,0 +1,120 @@
+# swipeable-row/
+
+Swipe-to-reveal row actions via gesture-handler + reanimated.
+
+## Motion contract
+
+- The row follows the finger on the **UI thread**: a single `Gesture.Pan()` writes a `translateX`
+  shared value. Only `transform` is animated — never a layout property.
+- Settle (snap open / snap back) reads the global motion config via `useMotion()`:
+  `spring("snappy")` when the device tier can afford a spring, `withTiming(duration("fast"))` when
+  it cannot.
+- **Reduce motion / motion disabled** — `translateX` is assigned the target directly, no tween.
+- The in-flight settle is cancelled on unmount (`cancelAnimation`). Nothing gates unmount on an
+  animation completing.
+
+## Accessibility
+
+A swipe is invisible to assistive tech, so the actions would otherwise be unreachable (WCAG 2.1.1).
+
+- **The row declares one `accessibilityAction` per action** (`name: action.id`, `label:
+  action.label`, left tray first) plus `onAccessibilityAction` — the platform-native list-row model,
+  where the row is one accessibility element carrying custom actions. Running one settles the row
+  home and fires that action's `onPress`; an unknown `actionName` is a no-op.
+- **`accessible` is set only when the row has actions.** A container that isn't `accessible` reaches
+  neither the iOS trait nor Android's focus, so the custom actions would never surface. A row with
+  no actions gets no `accessible` prop at all — `accessible={false}` would *remove* a plain content
+  row from the tree.
+- **Both trays stay out of the accessibility tree** (`accessibilityElementsHidden` +
+  `importantForAccessibility="no-hide-descendants"`). They are absolutely positioned *before* the
+  content, so while they were exposed VoiceOver read "Archive, button. Delete, button." ahead of
+  every row's content, on every row, swiped open or not. The custom actions above are the complete
+  AT path; the trays are the sighted-touch affordance for the same set.
+- **Both of those props are native-only** — react-native-web implements neither (zero occurrences in
+  its dist) — so every action button also carries an explicit **`tabIndex={-1}`** (WCAG 2.4.3).
+  Without it RNW's `Pressable` defaults to `tabIndex={0}`: a 20-row list cost three Tab presses per
+  row, two landing on a button the content is painted over, where Enter fired a destructive action
+  the user never saw targeted. The button stays fully operable by press — only the tab stop is gone.
+- **Focus ring** (WCAG 2.4.7): an action draws a `border.focus` ring on focus, drawn *inside* its own
+  bounds — `swipeableRowStructure` clips to `overflow: "hidden"`, so the gap-outside ring
+  `Button`/`CopyButton` use would be cut off. Reachable today from a hardware keyboard on Android
+  only; see the known gaps below.
+
+### Tap affordance (WCAG 2.5.7 dragging movements, 2.5.1 pointer gestures)
+
+`accessibilityActions` is a screen-reader-only API — it does not satisfy 2.5.7, which requires a
+**single-pointer** alternative for a user who can see and tap but cannot perform a direction-dependent
+drag. Whenever the row has any action, it renders an always-visible `more-horizontal` icon `Button`
+(from `../button`), absolutely positioned at the trailing edge, on top of `children` — it never
+reflows consumer content, since `children` is opaque to this component. There is **no opt-out prop**:
+an opt-out would let a consumer silently reintroduce the exact conformance failure this fixes, for
+every row that used it.
+
+- **One action** → the button's `accessibilityLabel` is that action's own `label`, and pressing it
+  calls `runAction(id)` directly — the same function the drag and `accessibilityActions` both call.
+- **More than one** → the button (`accessibilityLabel="More actions"`) is composed as a `Menu`
+  trigger (from `../menu`, its public export only — `Menu.tsx` was not touched), listing every action
+  left-tray-first, each wired to `runAction(id)`. `SwipeableActionTone` doesn't fit `MenuItemTone`'s
+  `"default" | "danger"` union, so only `"danger"` maps through; every other tone reads as `"default"`.
+- **`variant="outline"`, not `"ghost"`** (unlike this same trigger shape in `BottomNav`): `children`'s
+  background is arbitrary and unpredictable, unlike a nav bar's controlled chrome, so the button needs
+  its own border to stay legible over whatever the consumer painted underneath. Known gap: a
+  photographic or otherwise busy background can still make it hard to see — no scrim token exists to
+  fix that without inventing one.
+- **Hidden from the accessibility tree** (`accessibilityElementsHidden` +
+  `importantForAccessibility="no-hide-descendants"` on its wrapper) — deliberately, not an oversight.
+  `accessibilityActions` above already gives AT users the identical set via the rotor/TalkBack menu;
+  exposing this too would be a second, differently-shaped path to the same actions, not a needed one.
+  This does NOT hide the opened `Menu` sheet itself: RN's `<Modal>` presents on its own native
+  surface, so it is a React child of the hidden wrapper but not an accessibility-tree descendant of it.
+- **`pointerEvents="box-none"` on the wrapper** so only the button's own small hit area intercepts
+  touch — the rest of the row's width stays available to the pan gesture underneath. This is the same
+  z-order trick the trays already use (plain `Pressable`s outside `GestureDetector`, resolved by
+  simple hit-testing, not gesture negotiation) — verified safe by that existing, working precedent.
+- **Consumer-visible on every existing `SwipeableRow`** — this renders on top of `children` for any
+  row that already passes `leftActions`/`rightActions`, no code change required to receive it. A
+  consumer whose own content already places something at the trailing edge (a chevron, a timestamp)
+  may see it overlap; there is no automatic reflow to avoid that, since `children` is opaque here.
+
+Known gaps:
+
+- The trays are hidden unconditionally, not only while closed. There is no JS-side open state —
+  `translateX` lives on the UI thread — and adding one would cost a re-render per gesture to
+  duplicate an operable path the custom actions already provide.
+- **On native there is no keyboard path to the actions at all.** `accessibilityActions` surfaces in
+  the VoiceOver rotor and the TalkBack menu, but an iPad Magic Keyboard or an Android hardware
+  keyboard reaches neither — the new tap affordance doesn't close this gap either, since it too is
+  hidden from AT (see above). A hardware-keyboard path would need to be a real tab stop instead.
+- The ring's `border.focus` grey is the token proven ≥ 3:1 against the **canvas**; over a saturated
+  action fill (`status.danger.solid`) that ratio is unmeasured (WCAG 2.4.11).
+
+## Performance
+
+- Action buttons are an extracted `React.memo` component; the row passes one stable `onRun(id)`
+  callback instead of allocating a closure per action.
+- Tone resolution, tray styles and label styles are memoized, so a parent re-render does not rebuild
+  them.
+
+## Props
+
+| Prop | Type | Default |
+|------|------|---------|
+| `children` | `ReactNode` | — |
+| `leftActions` | `readonly SwipeableRowAction[]` | `[]` |
+| `rightActions` | `readonly SwipeableRowAction[]` | `[]` |
+| `style` | `LayoutStyle` | — |
+| `testID` | `string` | — |
+
+`testID` seeds `${testID}-action-${action.id}` per action button and `-focus-ring` under that, plus
+`${testID}-more-affordance` (the tap-affordance wrapper), `${testID}-more` (its button) and
+`${testID}-more-menu` (the composed `Menu`, when there is more than one action).
+
+## Tests
+
+- `SwipeableRow.test.ts` — action-tone contrast over all 9 brands × both modes.
+- `SwipeableRow.render.test.tsx` — the accessibility-action contract, the hidden trays, and the tap
+  affordance: hidden-from-AT wrapper + `pointerEvents="box-none"`, the single-action direct-press
+  path, the multi-action `Menu` path (real rendered items, real dispatch to the pressed action's own
+  `onPress`), and the button's own rendered touch-target size.
+- `SwipeableRow.motion.test.tsx` — both halves of the reduce-motion contract, with
+  `withSpring`/`withTiming` mocked (a shared value written as a plain number proves nothing tweened).

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

@@ -0,0 +1,244 @@
+"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 { Pressable, 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 { useTheme } from "../../theme/hooks.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 = [];
+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 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]);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: action.label
+    // `accessibilityElementsHidden`/`importantForAccessibility` on the tray are no-ops in
+    // react-native-web (zero occurrences in its dist), so the tray's buttons would otherwise be
+    // invisible tab stops painted over by the row's own content.
+    ,
+    tabIndex: -1,
+    onPress: handlePress,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    style: buttonStyle,
+    children: [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
+    })]
+  });
+});
+//# sourceMappingURL=SwipeableRow.js.map