pixelize-native-library 1.0.6

package/lib/module/modules/reorder/Reorder.js

@@ -0,0 +1,291 @@
+"use strict";
+
+/**
+ * Reorder — a drag-to-reorder list built on plain `PanResponder` + `Animated` (Wave 3: no new
+ * dependency). Each row's drag handle is a hand-built three-bar "grip" glyph (no `IconName` in the
+ * closed 22-name set represents a drag handle, and that set is never extended for one component) —
+ * the `PanResponder` lives on the grip ONLY, not the whole row, so the label text never fights the
+ * gesture.
+ *
+ * The list is FULLY CONTROLLED: `items`/`onReorder` are the only source of truth. While a drag is
+ * live, the component tracks purely EPHEMERAL state — which row grabbed the gesture (`startIndex`)
+ * and which slot it is over now (`targetIndex`), both cleared on release — and previews the reorder
+ * by shifting the OTHER rows out of the way with `resolveRowShift` (see `Reorder.variants.ts`); the
+ * underlying `items` array is never mutated mid-drag, only on release, via `onReorder`. Because the
+ * shift preview and the final `moveItem` commit share the exact same splice semantics, the row that
+ * was being dragged lands in the same visual slot its shifted neighbours already vacated — no jump.
+ *
+ * WCAG 2.5.7 (Dragging Movements) requires a non-dragging way to perform the same function: every
+ * row also renders two `Button` icon-only presses ("Move X up" / "Move X down", reusing the shipped
+ * `chevron-up`/`chevron-down` names), disabled at the list's own start/end via
+ * `resolveReorderMoveState`. This is the REQUIRED accessible path, not optional polish — it is a
+ * real `accessibilityRole="button"` each (Button's own contract), fully operable without any touch
+ * gesture, and it shares `moveItem` with the drag path so both always agree.
+ *
+ * The grip itself carries no accessible action of its own — `PanResponder` gestures are invisible to
+ * assistive tech, and exposing it as a fake, non-operable "button" would be misleading — so it is
+ * hidden from the accessibility tree (`accessibilityElementsHidden` + `no-hide-descendants`, the same
+ * pairing `Timeline`'s decorative connector uses), leaving the up/down `Button`s as the one real
+ * accessible affordance for reordering.
+ */
+
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, PanResponder, Text, View } from "react-native";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { useTheme } from "../../theme/index.js";
+import { Button } from "../button/index.js";
+import { GRIP_HIT_SLOP, moveItem, reorderGripBarStructure, reorderGripStructure, reorderListStructure, reorderRowStructure, resolveDragTargetIndex, resolveReorderColors, resolveReorderMoveState, resolveRowPitch, resolveRowShift } from "./Reorder.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SHIFT_DURATION_MS = 200;
+export const Reorder = /*#__PURE__*/memo(function Reorder({
+  items,
+  onReorder,
+  disabled = false,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  // Memoized so every row (see `ReorderRow` below) gets the same `colors` reference across renders
+  // that don't change the theme — a fresh object here would defeat `ReorderRow`'s own `React.memo`.
+  const colors = useMemo(() => resolveReorderColors(theme.colors), [theme.colors]);
+  const [dragState, setDragState] = useState(null);
+  // Mirrors `dragState` for `handleDragEnd` to read without depending on it directly — depending on
+  // `dragState` there would recreate that callback (and its `onDragEnd` prop reference on every row)
+  // on each drag-target transition, defeating every `ReorderRow`'s memo mid-drag, the exact hot path
+  // this component's memoization is for.
+  const dragStateRef = useRef(dragState);
+  dragStateRef.current = dragState;
+  const dragY = useRef(new Animated.Value(0)).current;
+  const rowPitch = resolveRowPitch(theme.space[2]);
+
+  // Each row's own preview-shift `Animated.Value`, keyed by the item's stable id (not array index)
+  // so `handleDragEnd` below can reach every row and snap it back to 0 synchronously — see there for
+  // why that reset can't be left to each row's own effect.
+  const shiftValues = useRef(new Map()).current;
+  const getShiftValue = id => {
+    let value = shiftValues.get(id);
+    if (value === undefined) {
+      value = new Animated.Value(0);
+      shiftValues.set(id, value);
+    }
+    return value;
+  };
+  useEffect(() => {
+    const liveIds = new Set(items.map(item => item.id));
+    shiftValues.forEach((_value, id) => {
+      if (!liveIds.has(id)) shiftValues.delete(id);
+    });
+  }, [items, shiftValues]);
+  const handleDragStart = useCallback(index => {
+    dragY.setValue(0);
+    setDragState({
+      startIndex: index,
+      targetIndex: index
+    });
+  }, [dragY]);
+  const handleDragMove = useCallback((index, dy) => {
+    dragY.setValue(dy);
+    const targetIndex = resolveDragTargetIndex(index, dy, rowPitch, items.length);
+    setDragState(prev => prev !== null && prev.targetIndex === targetIndex ? prev : {
+      startIndex: index,
+      targetIndex
+    });
+  }, [dragY, rowPitch, items.length]);
+  const handleDragEnd = useCallback(() => {
+    // Every row's own `shift` must already read 0 in the SAME tick the array commits. React
+    // relocates a reordered row instantly via its stable `item.id` key, so a row that was previewed
+    // mid-drag would otherwise keep animating its stale offset toward 0 AFTER already landing in its
+    // new (correct) slot — a visible jump-then-slide. Resetting here, synchronously and before the
+    // `dragState` update below flips every row's `shiftTarget` prop to 0, means that prop-driven
+    // effect (in `ReorderRow`) only ever animates 0 → 0 — a no-op, not a stale-value correction.
+    shiftValues.forEach(value => value.setValue(0));
+    // `onReorder` (the consumer's own state setter, e.g. `setItems`) must NOT be called from inside
+    // a `setDragState` updater function — React requires updater functions to be pure, and may
+    // invoke them while processing `Reorder`'s own render, which is exactly what produced "Cannot
+    // update a component (…) while rendering a different component (Reorder)". Read via
+    // `dragStateRef` (kept in sync above on every render) rather than closing over `dragState`
+    // directly, so this callback's identity stays stable across a drag instead of churning on every
+    // target-row transition — see the ref's own comment for why that stability matters.
+    const currentDragState = dragStateRef.current;
+    if (currentDragState !== null && currentDragState.startIndex !== currentDragState.targetIndex) {
+      onReorder(moveItem(items, currentDragState.startIndex, currentDragState.targetIndex));
+    }
+    setDragState(null);
+    dragY.setValue(0);
+  }, [shiftValues, items, onReorder, dragY]);
+  const handleMove = useCallback((fromIndex, toIndex) => {
+    onReorder(moveItem(items, fromIndex, toIndex));
+  }, [items, onReorder]);
+
+  // `onMoveUp`/`onMoveDown` are handed to every row (see `ReorderRow` below); binding `index` here
+  // via one stable per-list callback (rather than a fresh `() => handleMove(index, index ± 1)`
+  // closure per row per render) keeps their identity stable across renders that don't touch
+  // `handleMove`, so a row's own `React.memo` isn't defeated by these two props alone.
+  const handleMoveUp = useCallback(index => handleMove(index, index - 1), [handleMove]);
+  const handleMoveDown = useCallback(index => handleMove(index, index + 1), [handleMove]);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: [reorderListStructure(theme), style],
+    children: items.map((item, index) => {
+      const rowTestID = testID === undefined ? undefined : `${testID}-item-${index}`;
+      const moveState = resolveReorderMoveState(index, items.length, disabled);
+      const isDragging = dragState !== null && dragState.startIndex === index;
+      const shiftTarget = dragState === null ? 0 : resolveRowShift(index, dragState.startIndex, dragState.targetIndex, rowPitch);
+      return /*#__PURE__*/_jsx(ReorderRow, {
+        item: item,
+        index: index,
+        disabled: disabled,
+        isDragging: isDragging,
+        shiftTarget: shiftTarget,
+        shift: getShiftValue(item.id),
+        dragY: dragY,
+        reducedMotion: reducedMotion,
+        colors: colors,
+        theme: theme,
+        upDisabled: moveState.upDisabled,
+        downDisabled: moveState.downDisabled,
+        onDragStart: handleDragStart,
+        onDragMove: handleDragMove,
+        onDragEnd: handleDragEnd,
+        onMoveUp: handleMoveUp,
+        onMoveDown: handleMoveDown,
+        testID: rowTestID
+      }, item.id);
+    })
+  });
+});
+/**
+ * One row. Split out as its own component (rather than inlined in `Reorder`'s `.map()`) because
+ * its shift-settle effect needs a per-row hook instance — Rules of Hooks forbid calling `useEffect`
+ * inside a loop body. `shift` itself is now passed in (owned by `Reorder`, keyed by `item.id`), not
+ * a locally-owned ref, so `handleDragEnd` can reset it synchronously on drop — see there for why.
+ * Wrapped in `React.memo`: `Reorder` re-renders every row on each drag-move tick, so only a row
+ * whose own props actually changed (its `shiftTarget`/`isDragging`, primarily) should re-render.
+ */
+const ReorderRow = /*#__PURE__*/memo(function ReorderRow({
+  item,
+  index,
+  disabled,
+  isDragging,
+  shiftTarget,
+  shift,
+  dragY,
+  reducedMotion,
+  colors,
+  theme,
+  upDisabled,
+  downDisabled,
+  onDragStart,
+  onDragMove,
+  onDragEnd,
+  onMoveUp,
+  onMoveDown,
+  testID
+}) {
+  useEffect(() => {
+    if (reducedMotion) {
+      shift.setValue(shiftTarget);
+      return;
+    }
+    Animated.timing(shift, {
+      toValue: shiftTarget,
+      duration: SHIFT_DURATION_MS,
+      useNativeDriver: true
+    }).start();
+  }, [shift, shiftTarget, reducedMotion]);
+
+  // Recreated every render — a fresh closure over this render's `disabled`/index means there is no
+  // stale-closure risk to manage via refs (the same trade Button/Select make for their own inline
+  // `onPress` closures).
+  const panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: () => !disabled,
+    onMoveShouldSetPanResponder: () => !disabled,
+    onPanResponderGrant: () => onDragStart(index),
+    onPanResponderMove: (_event, gestureState) => onDragMove(index, gestureState.dy),
+    onPanResponderRelease: () => onDragEnd(index),
+    onPanResponderTerminate: () => onDragEnd(index)
+  });
+  const {
+    onStartShouldSetResponder,
+    onMoveShouldSetResponder,
+    onResponderGrant,
+    onResponderMove,
+    onResponderRelease,
+    onResponderTerminate,
+    onResponderTerminationRequest
+  } = panResponder.panHandlers;
+  const gripColor = disabled ? colors.gripDisabled : colors.grip;
+  const gripTestID = testID === undefined ? undefined : `${testID}-grip`;
+
+  // Bind this row's own `index` into `onMoveUp`/`onMoveDown` once per render, rather than handing
+  // `Button` (this library's own component) a fresh inline closure on every render regardless of
+  // whether `index` or the handler actually changed.
+  const handlePressUp = useCallback(() => onMoveUp(index), [onMoveUp, index]);
+  const handlePressDown = useCallback(() => onMoveDown(index), [onMoveDown, index]);
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    testID: testID,
+    style: [reorderRowStructure(theme), {
+      backgroundColor: isDragging ? colors.draggingRowBackground : colors.rowBackground
+    }, isDragging && theme.elevation.md, {
+      transform: [{
+        translateY: isDragging ? dragY : shift
+      }],
+      zIndex: isDragging ? 1 : 0
+    }],
+    children: [/*#__PURE__*/_jsxs(View, {
+      testID: gripTestID,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      hitSlop: GRIP_HIT_SLOP,
+      onStartShouldSetResponder: onStartShouldSetResponder,
+      onMoveShouldSetResponder: onMoveShouldSetResponder,
+      onResponderGrant: onResponderGrant,
+      onResponderMove: onResponderMove,
+      onResponderRelease: onResponderRelease,
+      onResponderTerminate: onResponderTerminate,
+      onResponderTerminationRequest: onResponderTerminationRequest,
+      style: reorderGripStructure(),
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [reorderGripBarStructure(theme), {
+          backgroundColor: gripColor
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [reorderGripBarStructure(theme), {
+          backgroundColor: gripColor
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [reorderGripBarStructure(theme), {
+          backgroundColor: gripColor
+        }]
+      })]
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+        flex: 1,
+        fontSize: theme.fontSizes.md,
+        color: colors.label
+      }],
+      children: item.label
+    }), /*#__PURE__*/_jsx(Button, {
+      icon: "chevron-up",
+      variant: "ghost",
+      tone: "neutral",
+      size: "sm",
+      disabled: upDisabled,
+      accessibilityLabel: `Move ${item.label} up`,
+      onPress: handlePressUp,
+      testID: testID === undefined ? undefined : `${testID}-move-up`
+    }), /*#__PURE__*/_jsx(Button, {
+      icon: "chevron-down",
+      variant: "ghost",
+      tone: "neutral",
+      size: "sm",
+      disabled: downDisabled,
+      accessibilityLabel: `Move ${item.label} down`,
+      onPress: handlePressDown,
+      testID: testID === undefined ? undefined : `${testID}-move-down`
+    })]
+  });
+});
+//# sourceMappingURL=Reorder.js.map

package/lib/module/modules/reorder/Reorder.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","useCallback","useEffect","useMemo","useRef","useState","Animated","PanResponder","Text","View","useReducedMotion","useTheme","Button","GRIP_HIT_SLOP","moveItem","reorderGripBarStructure","reorderGripStructure","reorderListStructure","reorderRowStructure","resolveDragTargetIndex","resolveReorderColors","resolveReorderMoveState","resolveRowPitch","resolveRowShift","jsx","_jsx","jsxs","_jsxs","SHIFT_DURATION_MS","Reorder","items","onReorder","disabled","style","testID","theme","reducedMotion","colors","dragState","setDragState","dragStateRef","current","dragY","Value","rowPitch","space","shiftValues","Map","getShiftValue","id","value","get","undefined","set","liveIds","Set","map","item","forEach","_value","has","delete","handleDragStart","index","setValue","startIndex","targetIndex","handleDragMove","dy","length","prev","handleDragEnd","currentDragState","handleMove","fromIndex","toIndex","handleMoveUp","handleMoveDown","children","rowTestID","moveState","isDragging","shiftTarget","ReorderRow","shift","upDisabled","downDisabled","onDragStart","onDragMove","onDragEnd","onMoveUp","onMoveDown","timing","toValue","duration","useNativeDriver","start","panResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","onPanResponderMove","_event","gestureState","onPanResponderRelease","onPanResponderTerminate","onStartShouldSetResponder","onMoveShouldSetResponder","onResponderGrant","onResponderMove","onResponderRelease","onResponderTerminate","onResponderTerminationRequest","panHandlers","gripColor","gripDisabled","grip","gripTestID","handlePressUp","handlePressDown","backgroundColor","draggingRowBackground","rowBackground","elevation","md","transform","translateY","zIndex","accessibilityElementsHidden","importantForAccessibility","hitSlop","numberOfLines","fontStyleForWeight","fontWeights","regular","flex","fontSize","fontSizes","color","label","icon","variant","tone","size","accessibilityLabel","onPress"],"sourceRoot":"../../../../src","sources":["modules/reorder/Reorder.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/reorder/Reorder.variants.js

@@ -0,0 +1,172 @@
+"use strict";
+
+/**
+ * Reorder's style + behaviour resolution — the pure functions the component (and its tests) depend
+ * on, plus the themed structural variant resolvers. Same split as `Button.variants.ts`:
+ *  - STRUCTURE (row height, grip bar size, radius, spacing) lives in the `createThemedVariants`
+ *    resolvers below, registered once per theme identity.
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveReorderColors`), never a raw ramp.
+ *  - The drag MATH (`resolveDragTargetIndex`, `resolveRowShift`) and the array mutation
+ *    (`moveItem`) are pure and shared by BOTH interaction paths — the live drag gesture and the
+ *    WCAG 2.5.7 accessible up/down alternative — so the two paths are guaranteed to agree.
+ *  - `resolveReorderMoveState` gates that alternative: the first row can't move up, the last can't
+ *    move down, and the whole pair is gated by the list's own `disabled` prop.
+ *
+ * Free of React and of any lucide import, so the WCAG + behaviour tests import it directly (mocking
+ * only `react-native`'s `StyleSheet`, as `core/style` and every sibling module's tests do).
+ */
+
+import { createThemedVariants, createVariants } from "../../core/style/index.js";
+
+/**
+ * Fixed row height, in dp. A fixed height — rather than per-row `onLayout` measurement — is what
+ * lets the drag math below be a closed-form `dy ÷ rowHeight`, never an async-measured guess (the
+ * build brief's own preference: "a fixed height is simpler and more robust here").
+ */
+export const REORDER_ROW_HEIGHT = 56;
+
+/** The 44dp floor every touch target holds itself to (WCAG 2.5.5 AAA; comfortably clears 2.5.8). */
+export const MIN_TOUCH_TARGET = 44;
+const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
+
+/** Grip bar glyph — three of these stacked make the drag-handle affordance. No `IconName` in the
+ *  closed 22-name set represents a drag handle, and that set is never extended for one component
+ *  (per the build brief), so the grip is hand-built from plain themed bars instead. */
+export const GRIP_BAR_WIDTH = 20;
+export const GRIP_BAR_HEIGHT = 3;
+export const GRIP_BAR_GAP = 4;
+
+/** The grip's visual footprint: three bars plus the two gaps between them. */
+export const GRIP_BOX = {
+  width: GRIP_BAR_WIDTH,
+  height: GRIP_BAR_HEIGHT * 3 + GRIP_BAR_GAP * 2
+};
+
+/** Symmetric touch expansion on both axes so the grip reaches 44dp without growing the glyph —
+ *  same discipline as `Button`'s `hitSlop`, just computed on two axes instead of one. */
+export const GRIP_HIT_SLOP = {
+  top: slopFor(GRIP_BOX.height),
+  bottom: slopFor(GRIP_BOX.height),
+  left: slopFor(GRIP_BOX.width),
+  right: slopFor(GRIP_BOX.width)
+};
+/**
+ * Maps Reorder's fixed visual roles onto ROLE colours — never a hardcoded hex. There is no
+ * `tone`/`variant` prop to widen: every row reads identically, so every colour Reorder can show is
+ * one of these role lookups, guaranteed legible in both modes (same reasoning `resolveTimelineColors`
+ * documents for its own tone-less component).
+ */
+export function resolveReorderColors(colors) {
+  return {
+    rowBackground: colors.bg.surface,
+    draggingRowBackground: colors.bg.raised,
+    label: colors.fg.default,
+    grip: colors.fg.muted,
+    gripDisabled: colors.fg.disabled
+  };
+}
+/**
+ * Gates the accessible up/down alternative (WCAG 2.5.7 — Dragging Movements REQUIRES a non-dragging
+ * way to perform the same function): the first row can't move up, the last can't move down, and the
+ * list's own `disabled` prop gates every row regardless of position.
+ */
+export function resolveReorderMoveState(index, count, disabled) {
+  return {
+    upDisabled: disabled || index <= 0,
+    downDisabled: disabled || index >= count - 1
+  };
+}
+
+/**
+ * Pure array move: `fromIndex` → `toIndex` (clamped into range). Used by BOTH the drag gesture and
+ * the accessible up/down buttons, so both interaction paths are guaranteed to produce the same
+ * result for the same intent. Out-of-range `fromIndex` returns an unmodified shallow copy.
+ */
+export function moveItem(items, fromIndex, toIndex) {
+  if (fromIndex < 0 || fromIndex >= items.length) return [...items];
+  const target = Math.max(0, Math.min(items.length - 1, toIndex));
+  const next = [...items];
+  const [moved] = next.splice(fromIndex, 1);
+  next.splice(target, 0, moved);
+  return next;
+}
+
+/**
+ * The REAL on-screen distance between two rows' tops: the row's own height plus the `rowGap` the
+ * list container applies between rows (the same `theme.space[2]` `reorderListStructure` uses below)
+ * — NOT `REORDER_ROW_HEIGHT` alone, which is how tall a row is, not how far apart two rows sit.
+ * `resolveDragTargetIndex`/`resolveRowShift` must be given THIS distance (call with
+ * `theme.space[2]`, never a hardcoded gap), or the target-row flip fires one `rowGap` early and the
+ * preview shift undershoots the vacated slot by `rowGap` per row, compounding on multi-row shifts.
+ */
+export function resolveRowPitch(rowGap) {
+  return REORDER_ROW_HEIGHT + rowGap;
+}
+
+/**
+ * The row a drag gesture is over right now, from the accumulated `dy` since the gesture grabbed
+ * `startIndex` — a closed-form step count against the REAL row pitch (see `resolveRowPitch`),
+ * clamped into the list's bounds. Rounds to the nearest row, so a drag must cross half a row's
+ * PITCH to advance a step.
+ */
+export function resolveDragTargetIndex(startIndex, dy, rowPitch, itemCount) {
+  const steps = Math.round(dy / rowPitch);
+  return Math.max(0, Math.min(itemCount - 1, startIndex + steps));
+}
+
+/**
+ * The vertical offset a NON-dragged row animates to, to open the gap the dragged row is passing
+ * over — `-rowPitch` (slides up) for rows between `startIndex` (exclusive) and `targetIndex`
+ * (inclusive) when the drag is moving down, `+rowPitch` (slides down) for the mirrored case moving
+ * up, `0` otherwise. `rowPitch` must be the REAL on-screen distance between row tops (see
+ * `resolveRowPitch`) — row height alone undershoots by `rowGap` per row. Symmetric with `moveItem`'s
+ * splice semantics: on drop, the dragged row's array position becomes `targetIndex` and every
+ * shifted row's array position is unchanged — only its on-screen slot moved — so this is exactly the
+ * visual preview of what `moveItem` will commit.
+ */
+export function resolveRowShift(rowIndex, startIndex, targetIndex, rowPitch) {
+  if (startIndex === targetIndex) return 0;
+  if (startIndex < targetIndex && rowIndex > startIndex && rowIndex <= targetIndex) return -rowPitch;
+  if (startIndex > targetIndex && rowIndex < startIndex && rowIndex >= targetIndex) return rowPitch;
+  return 0;
+}
+
+/** The list container: rows are laid out as plain flex children, spaced by `rowGap`. */
+export const reorderListStructure = createThemedVariants(theme => ({
+  base: {
+    rowGap: theme.space[2]
+  }
+}));
+
+/** The whole row: fixed height (see `REORDER_ROW_HEIGHT`), grip/label/buttons spaced by `columnGap`. */
+export const reorderRowStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: REORDER_ROW_HEIGHT,
+    paddingHorizontal: theme.space[3],
+    borderRadius: theme.radii.base,
+    columnGap: theme.space[3]
+  }
+}));
+
+/** The grip's touch box — no theme dependency (a fixed design constant, same reasoning `BUTTON_SIZES`
+ *  documents for its own plain-constant sizing), so this uses the untethered `createVariants`. */
+export const reorderGripStructure = createVariants({
+  base: {
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    rowGap: GRIP_BAR_GAP
+  }
+});
+
+/** One grip bar — pill-shaped via the theme's `radii.full`, so this needs the themed resolver. */
+export const reorderGripBarStructure = createThemedVariants(theme => ({
+  base: {
+    width: GRIP_BAR_WIDTH,
+    height: GRIP_BAR_HEIGHT,
+    borderRadius: theme.radii.full
+  }
+}));
+//# sourceMappingURL=Reorder.variants.js.map

package/lib/module/modules/reorder/Reorder.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createThemedVariants","createVariants","REORDER_ROW_HEIGHT","MIN_TOUCH_TARGET","slopFor","dimension","Math","max","ceil","GRIP_BAR_WIDTH","GRIP_BAR_HEIGHT","GRIP_BAR_GAP","GRIP_BOX","width","height","GRIP_HIT_SLOP","top","bottom","left","right","resolveReorderColors","colors","rowBackground","bg","surface","draggingRowBackground","raised","label","fg","default","grip","muted","gripDisabled","disabled","resolveReorderMoveState","index","count","upDisabled","downDisabled","moveItem","items","fromIndex","toIndex","length","target","min","next","moved","splice","resolveRowPitch","rowGap","resolveDragTargetIndex","startIndex","dy","rowPitch","itemCount","steps","round","resolveRowShift","rowIndex","targetIndex","reorderListStructure","theme","base","space","reorderRowStructure","flexDirection","alignItems","paddingHorizontal","borderRadius","radii","columnGap","reorderGripStructure","justifyContent","reorderGripBarStructure","full"],"sourceRoot":"../../../../src","sources":["modules/reorder/Reorder.variants.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/reorder/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/reorder`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The drag/shift math (`moveItem`, `resolveDragTargetIndex`, …) and the
+ * colour/structure resolvers stay internal — a consumer configures a Reorder through its props,
+ * never by importing its internals.
+ */
+
+export { Reorder } from "./Reorder.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/reorder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Reorder"],"sourceRoot":"../../../../src","sources":["modules/reorder/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,cAAW","ignoreList":[]}

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

@@ -0,0 +1,91 @@
+# select/ — a trigger + native-Modal option list, styled like an Input box
+
+`Select` is a `Pressable` trigger (sized/bordered like an Input) that opens its options in React
+Native's OWN `Modal` — imported directly from `"react-native"`, never the library's own `Modal`
+COMPONENT (its rendered output/behaviour): Select still owns its option list's markup outright.
+
+The one deliberate exception: on web, Select reads `../modal/ModalPortalContext` +
+`../modal/renderWebPortal` — the same web-portal-containment mechanism `Modal` uses — so opening a
+`ModalPortalProvider` containing an app also contains Select's option sheet. See
+`../modal/MODULE.md`'s "Web portal mechanism" section for the full explanation; this is a plain
+context + a stateless helper with no React-tree footprint of its own, not a dependency on the
+`Modal` component.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Select.tsx` | The component. Trigger + `Modal` composition, open/close state, focus handling. |
+| `Select.variants.ts` | Pure resolvers (`SELECT_SIZES`, `resolveSelectTriggerColors`, `resolveSelectRowColors`, `resolveSelectAccessibility`) + the themed structural resolvers (`selectTriggerStructure`, `selectOverlayStructure`, `selectSheetStructure`, `selectRowStructure`). No React, no lucide. |
+| `index.ts` | Public surface: `Select`, `SelectProps`, `SelectOption`, `SelectSize`. |
+| `__tests__/Select.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
+| `__tests__/Select.render.test.tsx` | Render: display, open/close, disabled gating, selection, backdrop dismiss, and the web-portal opt-in branch (mocking `renderWebPortal`). |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `options` | `{ label: string; value: string }[]` | — | Required. |
+| `value` | `string` | — | The currently selected option's `value`. |
+| `onValueChange` | `(value: string) => void` | — | Required. Fired on row press; the menu closes right after. |
+| `placeholder` | `string` | — | Shown when `value` matches no option. |
+| `label` | `string` | — | Field label above the trigger; also folded into its accessible name. |
+| `disabled` | `boolean` | `false` | Blocks opening the menu; dimmed like Button's disabled state. |
+| `size` | `sm \| md \| lg` | `md` | 32 / 40 / 48 dp; short sizes reach 44 via `hitSlop`. |
+| `containerStyle` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | Also seeds `${testID}-backdrop` and `${testID}-option-${value}`. |
+
+No `icon` prop — the chevron/check glyphs are fixed to the component's own semantics, not
+caller-configurable.
+
+## Accessibility contract (WCAG)
+
+- **2.5.x target size** — every trigger size reaches ≥ 44dp via `hitSlop`; option rows have a
+  44dp `minHeight` directly (they're list items, not a single control that can grow with slop).
+- **4.1.2** — the trigger is `accessibilityRole="button"` with `accessibilityState.expanded`
+  tracking whether the option list is showing.
+- **1.4.3** — trigger value/placeholder text, the field label, and option-row labels are measured
+  ≥ 4.5:1 against their own fill (`bg.canvas` for the label, `bg.surface` for the trigger and every
+  row — row fill is constant across selection, see below).
+- **1.4.11** — the trigger boundary (`border.interactive`, `border.focus` while focused/open) and
+  the active row's "check" glyph are measured ≥ 3:1.
+- Selection is conveyed by the "check" glyph + `accessibilityState.selected`, never by a row
+  background swap: `bg.selected` isn't proven ≥ 4.5:1 against `fg.default` on every brand
+  (measured: fails on radiant/rosewood light), so `resolveSelectRowColors` keeps the row fill at
+  `bg.surface` for every row, selected or not.
+- Each option row is `accessibilityRole="menuitem"` with `accessibilityState={{ selected }}`; the
+  "check" icon is the sighted echo of the same state, never the only signal.
+- **2.3.3** — the menu's `animationType` is `"none"` instead of `"fade"` when
+  `useReducedMotion()` is true.
+- Disabled is exempt from the contrast minimum (WCAG 1.4.3) — like Button, it's signalled by a
+  uniform `opacity: 0.5` dim rather than a separate, still-must-pass colour pair.
+
+## Patterns copied from Button (the reference module)
+
+1. **Structure vs colour split** — sizing/spacing/radius/border-width via `createThemedVariants`;
+   colour resolved from `RoleColors` per state, applied inline.
+2. **Pure, testable resolvers** in `Select.variants.ts` — the WCAG + behaviour contract is
+   unit-tested against real palettes, never eyeballed.
+3. **Closed-ish surface** — `size` is a closed union; `options`/`value`/`onValueChange` are the
+   data contract a select inherently needs, not a colour escape hatch.
+4. `style` exception — Select exposes `containerStyle` (the documented exception for a component
+   wrapping a native primitive's outer box), not a second `style` prop.
+
+## Known gaps
+
+- No search/filter or multi-select — v1 is a single-select list, matching the spec this module
+  was built against. A future `Combobox`/`MultiSelect` would be a separate module, not a prop
+  added here (closed-prop-contract).
+- The trigger's focus ring is a border-colour swap (`border.focus`), not Button's offset ring —
+  intentional: Select mimics Input-style focus conventions, which this library has not built an
+  `Input` module to confirm against yet (parallel build). Revisit if `Input` lands a different
+  convention and the two should be reconciled.
+- No measured anchor position — the overlay always centers within its container, regardless of
+  where the trigger sits on screen, same as Menu's identical `justifyContent: "center"` overlay
+  (see `menu/MODULE.md`'s Known gaps). A real anchor would need `Button` to forward refs (it
+  doesn't today) plus per-platform measurement — a future `Popover`-style module, not a prop
+  added here.
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). The option rows use host `Pressable`/`Text` plus this library's `Icon`, which only ever receives primitive props — nothing to memoize.