panelui-native 0.62.0 → 0.63.0

package/src/components/polar-area-chart/index.tsx

@@ -233,7 +233,7 @@ const PolarAreaChartRoot = forwardRef<PolarAreaChartHandle, PolarAreaChartProps>
       startAngle = 0,
       padAngle = 0,
       status = 'ready',
-      animationDuration = 800,
+      animationDuration = 620,
       activeIndex: activeIndexProp,
       onActiveIndexChange,
       children,
@@ -311,7 +311,7 @@ const PolarAreaChartRoot = forwardRef<PolarAreaChartHandle, PolarAreaChartProps>
         reveal.value = 0;
         reveal.value = withTiming(1, {
           duration: animationDuration,
-          easing: Easing.bezier(0.85, 0, 0.15, 1),
+          easing: Easing.out(Easing.cubic),
         });
       },
       [reducedMotion, animationDuration, reveal]

package/src/components/radar-chart/index.tsx

@@ -85,7 +85,7 @@ const LABEL_ROOM = { x: 62, y: 26 };
 const BARE_ROOM = { x: 6, y: 6 };
 
 /** How long the polygons take to grow out of the centre. */
-const REVEAL_DURATION = 900;
+const REVEAL_DURATION = 620;
 /** …and how long one profile takes to travel to the next when the data changes. */
 const MORPH_DURATION = 420;
 
@@ -312,17 +312,27 @@ const RadarChartRoot = forwardRef<RadarChartHandle, RadarChartProps>(
         reveal.value = 0;
         reveal.value = withTiming(1, {
           duration: animationDuration,
-          easing: Easing.bezier(0.85, 0, 0.15, 1),
+          easing: Easing.out(Easing.cubic),
         });
       },
       [reducedMotion, animationDuration, reveal]
     );
 
     useEffect(() => {
-      if (revealed.current || loading || radius <= 0 || !data.length) return;
+      /*
+       * Going back to `loading` arms the reveal again. Without this a chart
+       * that is refetched comes back fully drawn on the frame the data lands,
+       * which reads as the loading state having been for nothing.
+       */
+      if (loading) {
+        revealed.current = false;
+        reveal.value = 0;
+        return;
+      }
+      if (revealed.current || radius <= 0 || !data.length) return;
       revealed.current = true;
       playReveal();
-    }, [loading, radius, data.length, playReveal]);
+    }, [loading, radius, data.length, playReveal, reveal]);
 
     useImperativeHandle(ref, () => ({ replay: playReveal }), [playReveal]);
 

package/src/components/ring-chart/index.tsx

@@ -167,7 +167,7 @@ const RingChartRoot = forwardRef<RingChartHandle, RingChartProps>(function RingC
     ringGap = 6,
     startAngle = 0,
     endAngle = 360,
-    animationDuration = 1100,
+    animationDuration = 700,
     activeIndex: activeIndexProp,
     onActiveIndexChange,
     children,
@@ -219,7 +219,7 @@ const RingChartRoot = forwardRef<RingChartHandle, RingChartProps>(function RingC
       reveal.value = 0;
       reveal.value = withTiming(1, {
         duration: animationDuration,
-        easing: Easing.bezier(0.85, 0, 0.15, 1),
+        easing: Easing.out(Easing.cubic),
       });
     },
     [reducedMotion, animationDuration, reveal]

package/src/components/section-rail/index.tsx

@@ -28,7 +28,9 @@
  * everywhere it is not drawing, so the content underneath still scrolls.
  */
 import {
+  Children,
   createContext,
+  isValidElement,
   useCallback,
   useContext,
   useEffect,
@@ -59,7 +61,28 @@ const SPRING = { damping: 20, stiffness: 260, mass: 0.6 } as const;
 const BAR_WIDTH = 16;
 const BAR_LEVEL_STEP = 4;
 /** How much wider the active bar gets, so position is readable at a glance. */
-const BAR_ACTIVE_EXTRA = 8;
+const BAR_ACTIVE_EXTRA = 12;
+/**
+ * How much of that extra the bars either side of the active one keep.
+ *
+ * The rail is read by shape, and one long bar in a column of identical short
+ * ones only says *which* one — it takes a second look to see where that is in
+ * the run. A step down on each side gives the active bar a slope to sit on, so
+ * position is legible from the silhouette alone.
+ *
+ * Only the immediate neighbours. Two steps of falloff is a taper down the whole
+ * rail, which reads as a gradient the bars happen to sit in rather than as a
+ * mark on one of them.
+ */
+const BAR_NEIGHBOUR = 0.45;
+/** Opacity of a bar with nothing near it, and how much proximity adds. */
+const BAR_REST_OPACITY = 0.32;
+/**
+ * How long a jump from the panel is given to arrive before the rail starts
+ * ticking again. Long enough for a scroll across a whole screen, short enough
+ * that a jump which never lands does not mute the next one.
+ */
+const JUMP_TIMEOUT = 900;
 /** Indent per level in the expanded panel. */
 const ITEM_INDENT = 12;
 /**
@@ -93,6 +116,18 @@ interface SectionRailContextValue {
 
 const SectionRailContext = createContext<SectionRailContextValue | null>(null);
 
+/**
+ * The bars' values, in the order they are written.
+ *
+ * A bar knows whether it is the active one; it cannot know how far it is *from*
+ * the active one, which is what the falloff either side needs. The trigger
+ * reads it off its own children — the only place in the tree where the run is
+ * visible at all — rather than having each bar register itself, since a
+ * registration order is whatever order the rows happened to mount in and the
+ * rail is drawn in the order they were written.
+ */
+const SectionRailBarsContext = createContext<string[]>([]);
+
 function useSectionRail(component: string): SectionRailContextValue {
   const context = useContext(SectionRailContext);
   if (!context) {
@@ -157,6 +192,7 @@ function SectionRailRoot({
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const insets = useSafeAreaInsets();
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const jumpTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const isControlled = valueProp !== undefined;
   const value = isControlled ? valueProp : internalValue;
@@ -177,16 +213,46 @@ function SectionRailRoot({
 
   const close = useCallback(() => setOpen(false), [setOpen]);
 
-  // A pending close must not fire after the rail has gone.
+  // A pending close, or a jump still being waited on, must not fire after the
+  // rail has gone.
   useEffect(
     () => () => {
       if (timer.current) clearTimeout(timer.current);
+      if (jumpTimer.current) clearTimeout(jumpTimer.current);
     },
     []
   );
 
+  /*
+   * The section a tap asked for, while the screen is still travelling to it.
+   *
+   * A jump is animated, so the scroll handler driving `value` reports every
+   * section the screen passes on the way — each of which is a change of section
+   * as far as the tick below can tell. One tap became two or three ticks, and
+   * the panel lit up a row nobody chose. Nothing between the tap and the
+   * arrival is a section the reader went to, so nothing between them ticks.
+   */
+  const jumpTo = useRef<string | null>(null);
+
+  const endJump = useCallback(() => {
+    jumpTo.current = null;
+    if (jumpTimer.current) {
+      clearTimeout(jumpTimer.current);
+      jumpTimer.current = null;
+    }
+  }, []);
+
   const handleValueChange = useCallback(
     (next: string) => {
+      jumpTo.current = next;
+      if (jumpTimer.current) clearTimeout(jumpTimer.current);
+      /*
+       * A backstop, not the normal way out. A jump to a section the scroller
+       * cannot reach — the last one on a screen shorter than the viewport —
+       * never arrives, and without this the rail would stay silent for good.
+       */
+      jumpTimer.current = setTimeout(endJump, JUMP_TIMEOUT);
+
       if (!isControlled) setInternalValue(next);
       onValueChange?.(next);
 
@@ -197,7 +263,7 @@ function SectionRailRoot({
       if (timer.current) clearTimeout(timer.current);
       timer.current = setTimeout(() => setOpen(false), closeDelay);
     },
-    [isControlled, onValueChange, closeDelay, setOpen]
+    [isControlled, onValueChange, closeDelay, setOpen, endJump]
   );
 
   /*
@@ -208,13 +274,21 @@ function SectionRailRoot({
    */
   const ticked = useRef(false);
   useEffect(() => {
-    if (!haptics) return;
     if (!ticked.current) {
       ticked.current = true;
       return;
     }
-    selectionTick();
-  }, [value, haptics]);
+
+    const target = jumpTo.current;
+    if (target !== null) {
+      // Still on the way. Only the section that was asked for ends the jump,
+      // and only it is worth feeling.
+      if (value !== target) return;
+      endJump();
+    }
+
+    if (haptics) selectionTick();
+  }, [value, haptics, endJump]);
 
   const context = useMemo(
     () => ({
@@ -269,6 +343,22 @@ export interface SectionRailTriggerProps extends ViewProps {
 function SectionRailTrigger({ className, children, ...props }: SectionRailTriggerProps) {
   const { open, setOpen, placement } = useSectionRail('SectionRail.Trigger');
 
+  /*
+   * The run of bars, read off the children. Only the values are taken, so a bar
+   * wrapped in anything of the caller's is simply not found and falls back to
+   * drawing itself from `selected` alone.
+   */
+  const values = useMemo(() => {
+    const found: string[] = [];
+    Children.forEach(children, (child) => {
+      if (isValidElement(child) && child.type === SectionRailBar) {
+        const value = (child.props as SectionRailBarProps).value;
+        if (typeof value === 'string') found.push(value);
+      }
+    });
+    return found;
+  }, [children]);
+
   return (
     <Pressable
       accessibilityRole="button"
@@ -284,7 +374,9 @@ function SectionRailTrigger({ className, children, ...props }: SectionRailTrigge
       )}
       {...props}
     >
-      {textChildren(children)}
+      <SectionRailBarsContext.Provider value={values}>
+        {textChildren(children)}
+      </SectionRailBarsContext.Provider>
     </Pressable>
   );
 }
@@ -297,29 +389,56 @@ export interface SectionRailBarProps {
   level?: number;
 }
 
-/** One section, drawn as a bar. Widens and brightens when it is the active one. */
+/**
+ * One section, drawn as a bar.
+ *
+ * Three lengths rather than two: the active bar is longest and brightest, the
+ * bars either side of it keep a share of that, and everything further away sits
+ * at the resting length. What the reader gets from the extra step is *where* in
+ * the run they are without counting bars — the slope points at the middle of it.
+ */
 function SectionRailBar({ className, value, level = 0 }: SectionRailBarProps) {
   const { value: active } = useSectionRail('SectionRail.Bar');
+  const values = useContext(SectionRailBarsContext);
   const selected = active === value;
 
   const restColor = useCSSVariable('--color-muted-foreground');
   const activeColor = useCSSVariable('--color-foreground');
 
+  /*
+   * How near this bar is to the one that is active: 1 for the active bar itself,
+   * a share of it for its neighbours, 0 for the rest. A bar the trigger did not
+   * find — one the caller wrapped in something of their own — has no position to
+   * measure from, so it falls back to the plain selected-or-not it always had.
+   */
+  const index = values.indexOf(value);
+  const activeIndex = active === undefined ? -1 : values.indexOf(active);
+  const proximity =
+    index < 0 || activeIndex < 0
+      ? selected
+        ? 1
+        : 0
+      : Math.abs(index - activeIndex) === 0
+        ? 1
+        : Math.abs(index - activeIndex) === 1
+          ? BAR_NEIGHBOUR
+          : 0;
+
   const base = Math.max(BAR_WIDTH - level * BAR_LEVEL_STEP, 6);
-  const progress = useSharedValue(selected ? 1 : 0);
+  const progress = useSharedValue(proximity);
 
   useEffect(() => {
-    progress.value = withSpring(selected ? 1 : 0, SPRING);
-  }, [selected, progress]);
+    progress.value = withSpring(proximity, SPRING);
+  }, [proximity, progress]);
 
   const idle = typeof restColor === 'string' ? restColor : '#818181';
   const on = typeof activeColor === 'string' ? activeColor : '#f5f5f5';
 
   const style = useAnimatedStyle(() => ({
     width: base + progress.value * BAR_ACTIVE_EXTRA,
-    // The inactive bars are dim on purpose — the rail is a position
-    // indicator, so only one of them is meant to be read.
-    opacity: 0.4 + progress.value * 0.6,
+    // The far bars are dim on purpose — the rail is a position indicator, so
+    // only the part of it the reader is in is meant to be read.
+    opacity: BAR_REST_OPACITY + progress.value * (1 - BAR_REST_OPACITY),
     backgroundColor: interpolateColor(progress.value, [0, 1], [idle, on]),
   }));
 

package/src/components/selection-mode/index.tsx

@@ -66,7 +66,7 @@ import {
   useState,
   type ReactNode,
 } from 'react';
-import { Pressable, View, type ViewProps } from 'react-native';
+import { Pressable, ScrollView, View, type ViewProps } from 'react-native';
 import Animated, {
   FadeIn,
   FadeOut,
@@ -83,6 +83,7 @@ import { useCSSVariable } from 'uniwind';
 import { useBackHandler } from '../../hooks/use-back-handler';
 import { CheckIcon, IconColorProvider, XIcon } from '../../icons';
 import { AnimatedPressable } from '../../primitives/animated-pressable';
+import { Collapse } from '../../primitives/collapse';
 import { Text, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import { selectionTick } from '../../utils/haptics';
@@ -91,6 +92,15 @@ import { BottomSheet } from '../bottom-sheet';
 /** How long the circle takes to come and go, in milliseconds. */
 const REVEAL_DURATION = 180;
 
+/**
+ * The circle's width, and the gap after it — both in points, and both mirrors
+ * of classes on the parts below (`h-6 w-6`, `gap-3`). Written out because the
+ * circle's slot is animated between nothing and its full size, and an animation
+ * needs the number rather than the class.
+ */
+const INDICATOR_SIZE = 24;
+const ROW_GAP = 12;
+
 /** The spring the tick lands with — the same one the checkbox uses. */
 const TICK_SPRING = { damping: 15, stiffness: 300, mass: 0.5 } as const;
 
@@ -120,11 +130,23 @@ const selectionVariants = tv({
     bar: 'flex-row items-stretch',
     action: 'flex-1 items-center justify-center gap-1.5 px-2 py-3',
     actionLabel: 'text-xs font-medium text-foreground',
+    groupLabel: 'pb-2 ps-1',
   },
   variants: {
     selected: {
       true: { circle: 'border-primary', ring: 'border-foreground' },
     },
+    /**
+     * The action laid out along its label instead of above it.
+     *
+     * A screen's bar carries three or four actions side by side, so each one is
+     * a narrow column and the label belongs under the glyph. A sheet's footer
+     * usually carries one, full width — stacked there it is a tall block that
+     * costs the list a row of its own for no gain.
+     */
+    compact: {
+      true: { action: 'flex-row gap-2 px-4 py-2.5', actionLabel: 'text-sm' },
+    },
     destructive: {
       true: { actionLabel: 'text-destructive' },
     },
@@ -485,6 +507,33 @@ function SelectionModeItem({
 
   const context = useMemo(() => ({ value }), [value]);
 
+  /*
+   * The circle's arrival and departure, as width rather than as opacity.
+   *
+   * Fading a circle that has already been taken out of the row's layout fades
+   * it over content that has finished moving: the row snaps left the frame the
+   * mode ends, and a ghost of the circle dissolves where it used to be. The
+   * space is what the reader sees change, so the space is what animates, and
+   * the negative margin takes the row's own gap with it — a zero-width child
+   * still costs a gap, so without it the row would still jump the last twelve
+   * points.
+   */
+  const reveal = useSharedValue(showing ? 1 : 0);
+
+  useEffect(() => {
+    if (reducedMotion) {
+      reveal.value = showing ? 1 : 0;
+      return;
+    }
+    reveal.value = withTiming(showing ? 1 : 0, { duration: REVEAL_DURATION });
+  }, [showing, reducedMotion, reveal]);
+
+  const slotStyle = useAnimatedStyle(() => ({
+    width: reveal.value * INDICATOR_SIZE,
+    opacity: reveal.value,
+    marginEnd: (reveal.value - 1) * ROW_GAP,
+  }));
+
   return (
     <SelectionModeItemContext.Provider value={context}>
       <Pressable
@@ -513,14 +562,9 @@ function SelectionModeItem({
       >
         {indicator === 'leading' ? (
           <>
-            {showing ? (
-              <Animated.View
-                entering={reducedMotion ? undefined : FadeIn.duration(REVEAL_DURATION)}
-                exiting={reducedMotion ? undefined : FadeOut.duration(REVEAL_DURATION)}
-              >
-                <SelectionModeIndicator value={value} />
-              </Animated.View>
-            ) : null}
+            <Animated.View style={slotStyle} className="overflow-hidden">
+              <SelectionModeIndicator value={value} />
+            </Animated.View>
             {/*
              * `minWidth: 0` as well as growing. Without it a long title refuses
              * to be narrower than its own text, pushes the row past the screen
@@ -555,11 +599,37 @@ export interface SelectionModeGroupProps extends ViewProps {
    * For things recognised by sight rather than read — swatches, thumbnails,
    * slides. A grid of six colours is one glance; the same six as rows is a
    * scroll.
+   *
+   * Ignored when `horizontal` is set.
    */
   columns?: number;
-  /** Space between items in a grid, in points. */
+  /**
+   * Lay the items out in one row that scrolls sideways.
+   *
+   * For a strip of small things next to other controls — swatches above a
+   * slider, filters above a list. A grid of the same items claims as many rows
+   * as it needs and pushes everything below it off the sheet; a strip costs one
+   * row whatever the count.
+   *
+   * Wins over `columns`, which asks for the opposite arrangement.
+   */
+  horizontal?: boolean;
+  /** How wide each item is in a horizontal strip, in points. */
+  itemWidth?: number;
+  /** Space between items in a grid or a strip, in points. */
   gap?: number;
-  /** Hairlines between stacked items. On by default; off in a grid. */
+  /**
+   * A caption above the items, on the leading edge.
+   *
+   * Worth setting on anything picked by sight. A strip of colours with nothing
+   * in front of it is a row of circles the reader has to work out the purpose
+   * of, and a screen reader has nothing at all to announce it by — so this is
+   * also the group's accessibility label.
+   */
+  label?: string;
+  /** Extra classes for that caption. */
+  labelClassName?: string;
+  /** Hairlines between stacked items. On by default; off in a grid or a strip. */
   separators?: boolean;
   children: ReactNode;
 }
@@ -577,7 +647,11 @@ export interface SelectionModeGroupProps extends ViewProps {
 function SelectionModeGroup({
   className,
   columns,
+  horizontal = false,
+  itemWidth = 44,
   gap = 12,
+  label,
+  labelClassName,
   separators = true,
   children,
   style,
@@ -586,6 +660,49 @@ function SelectionModeGroup({
   const items = Children.toArray(children).filter(Boolean);
   const slots = selectionVariants({});
 
+  /**
+   * The caption, and the wrapper that carries it. A group with no `label` is
+   * the view it always was, so nothing gains a level of nesting for a prop it
+   * did not pass.
+   */
+  const captioned = (content: ReactNode) =>
+    label === undefined ? (
+      content
+    ) : (
+      <View accessibilityLabel={label}>
+        <Text size="sm" weight="medium" muted className={cn(slots.groupLabel(), labelClassName)}>
+          {label}
+        </Text>
+        {content}
+      </View>
+    );
+
+  if (horizontal) {
+    /*
+     * `gap` on the row rather than padding inside each cell, which is the
+     * opposite of the grid below. A strip is not dividing a fixed width between
+     * its items, so there is no wrap to protect against — and the gap has to be
+     * between them rather than around them, or the strip starts inset from
+     * whatever it is in.
+     */
+    return captioned(
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ flexDirection: 'row', gap }}
+        style={style}
+        className={className}
+        {...props}
+      >
+        {items.map((item, index) => (
+          <View key={index} style={{ width: itemWidth }}>
+            {item}
+          </View>
+        ))}
+      </ScrollView>
+    );
+  }
+
   if (columns && columns > 0) {
     /*
      * The gap is padding inside each cell, not `gap` on the row.
@@ -597,7 +714,7 @@ function SelectionModeGroup({
      * sits flush against whatever it is in.
      */
     const half = gap / 2;
-    return (
+    return captioned(
       <View
         style={[{ flexDirection: 'row', flexWrap: 'wrap', margin: -half }, style]}
         className={className}
@@ -612,7 +729,7 @@ function SelectionModeGroup({
     );
   }
 
-  return (
+  return captioned(
     <View className={cn(slots.group(), className)} style={style} {...props}>
       {items.map((item, index) => (
         <View key={index}>
@@ -659,16 +776,23 @@ function SelectionModeHeader({
 }: SelectionModeHeaderProps) {
   const { active, exit, count, total, allSelected, selectAll, clear, sheet } =
     useSelectionMode();
-  const reducedMotion = useReducedMotion();
   const slots = selectionVariants({});
 
-  if (!active) return null;
-
+  /*
+   * Collapsed rather than unmounted.
+   *
+   * A fade on a view that has already been taken out of the flow fades nothing
+   * — the list under it has jumped up 56 points on the frame the mode ended,
+   * and what is left dissolving is a header nobody is looking at any more.
+   * Giving up the height *is* the transition, so that is the part that animates.
+   */
   return (
-    <Animated.View
-      entering={reducedMotion ? undefined : FadeIn.duration(REVEAL_DURATION)}
-      exiting={reducedMotion ? undefined : FadeOut.duration(REVEAL_DURATION)}
+    <Collapse
+      open={active}
+      duration={REVEAL_DURATION}
       className={cn(slots.header(), className)}
+      accessibilityElementsHidden={!active}
+      importantForAccessibility={active ? 'auto' : 'no-hide-descendants'}
       {...props}
     >
       {children ? (
@@ -718,7 +842,7 @@ function SelectionModeHeader({
           </View>
         </>
       )}
-    </Animated.View>
+    </Collapse>
   );
 }
 
@@ -854,12 +978,13 @@ function SelectionModeAction({
   children,
   ...props
 }: SelectionModeActionProps) {
-  const { selected, exit, count } = useSelectionMode();
+  const { selected, exit, count, sheet } = useSelectionMode();
   const destructiveColor = useCSSVariable('--color-destructive');
   // Nothing picked is nothing to act on, so the action is off rather than
   // pressable-and-inert.
   const off = disabled || count === 0;
-  const slots = selectionVariants({ destructive, disabled: off });
+  // A sheet's footer is one action wide, not four, so it lies down.
+  const slots = selectionVariants({ destructive, disabled: off, compact: sheet });
 
   return (
     <AnimatedPressable
@@ -902,10 +1027,15 @@ export interface SelectionModeSheetProps {
   /**
    * How tall the sheet opens.
    *
-   * `half` by default, and deliberately not `auto`. A sheet that sizes to its
+   * `full` by default, and deliberately not `auto`. A sheet that sizes to its
    * content gives its scrolling body no height to fill, and a list inside a box
    * of no height draws nothing — which looks like an empty sheet rather than
-   * like a missing style. A selection is a list; give it the room.
+   * like a missing style.
+   *
+   * Full rather than half because a picker spends a header and a footer before
+   * it draws a single row. At half a screen that leaves four or five rows for
+   * the thing the sheet was opened to do, and the reader scrolls a list that
+   * would have fitted. Pass `half` for a sheet of two or three choices.
    */
   size?: 'auto' | 'half' | 'full';
   /**
@@ -949,7 +1079,7 @@ function SelectionModeSheet({
   onOpenChange,
   title = 'Select',
   hideSelectAll = false,
-  size = 'half',
+  size = 'full',
   children,
 }: SelectionModeSheetProps) {
   const parent = useSelectionMode();
@@ -978,7 +1108,14 @@ function SelectionModeSheet({
 
   return (
     <BottomSheet open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-      <BottomSheet.Content size={size} className={className}>
+      {/*
+       * No close button. The sheet's own sits in the top trailing corner, which
+       * is where the header puts "All" — two targets a few points apart, one of
+       * which throws the selection away. The sheet is still dismissed by its
+       * handle, by the scrim and by the back gesture, which is the same reason
+       * the header does not draw an X of its own in here.
+       */}
+      <BottomSheet.Content size={size} showClose={false} className={className}>
         {/*
          * The provider goes *inside* the sheet's content, not around the sheet.
          *

package/src/components/sortable/index.tsx

@@ -563,16 +563,26 @@ function SortableRoot({
    * the transforms that were holding rows in their new slots are no longer
    * needed — the layout puts them there now. Both orders are reset together,
    * which is what makes the re-render after a drop invisible.
+   *
+   * During render, and not in an effect. An effect runs *after* the commit that
+   * moved the rows, so for the frame in between, the dropped row sat in its new
+   * slot still carrying the transform that had carried it there — drawn a whole
+   * row's height away from where it belongs, which is what the flash after a
+   * drop was. Written here it lands on the same commit as the reorder, and there
+   * is no frame in which the two disagree.
+   *
+   * Writing a shared value is not React state, so this is not a render with a
+   * side effect on the tree; the ref is only there to make it happen once per
+   * change of order rather than on every render of the screen around it.
    */
-  useEffect(() => {
+  const applied = useRef(key);
+  if (applied.current !== key) {
+    applied.current = key;
     order.value = value;
     rendered.value = value;
     translate.value = 0;
     lift.value = 0;
-    // `value` is covered by `key`; depending on the array itself would fire
-    // this on every render of the screen around it.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key, order, rendered, translate, lift]);
+  }
 
   const indices = useMemo(() => {
     const map = new Map<string, number>();