panelui-native 0.73.0 → 0.75.0

package/src/components/splitter/splitter-math.ts

@@ -0,0 +1,244 @@
+/**
+ * The arithmetic a splitter runs while a seam is under a finger.
+ *
+ * Sizes are percentages of the whole splitter, never points, which is what
+ * makes a dragged layout survive a rotation or a window resize: the numbers
+ * mean the same thing at any container size, so nothing has to be re-measured
+ * and re-derived when one changes.
+ *
+ * It lives apart from the component for two reasons. It is the part with the
+ * edge cases — a pair of panels that cannot both honour their minimums, a
+ * collapse that has to decide between shut and its floor, a caller's sizes that
+ * do not add up — and it is the part that runs on the UI thread, where a wrong
+ * answer is a layout that sticks rather than an exception anybody sees.
+ */
+
+/** How small a panel may get before its neighbour stops taking room, in percent. */
+export const DEFAULT_MIN_SIZE = 10;
+/** How large a panel may get, in percent. */
+export const DEFAULT_MAX_SIZE = 100;
+
+export interface SplitterConstraint {
+  /** Smallest share the panel may hold while open, in percent. */
+  minSize: number;
+  /** Largest share the panel may hold, in percent. */
+  maxSize: number;
+  /** Whether dragging past the minimum shuts the panel instead of stopping. */
+  collapsible: boolean;
+  /** Share the panel holds while shut, in percent. */
+  collapsedSize: number;
+}
+
+export interface SplitterConstraintInput {
+  minSize?: number;
+  maxSize?: number;
+  collapsible?: boolean;
+  collapsedSize?: number;
+}
+
+function clamp(value: number, low: number, high: number): number {
+  'worklet';
+  return Math.min(Math.max(value, low), high);
+}
+
+function finite(value: number | undefined, fallback: number): number {
+  'worklet';
+  return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+
+/** The smallest share a panel can hold at all — its floor once shut, or its minimum. */
+export function panelFloor(constraint: SplitterConstraint): number {
+  'worklet';
+  return constraint.collapsible ? constraint.collapsedSize : constraint.minSize;
+}
+
+/**
+ * Fills a panel's declared limits in, in an order that cannot contradict
+ * itself: the maximum is never below the minimum, and a collapsed size is never
+ * above the minimum it exists to sit below.
+ */
+export function normalizeConstraint(
+  input: SplitterConstraintInput | undefined
+): SplitterConstraint {
+  const minSize = clamp(finite(input?.minSize, DEFAULT_MIN_SIZE), 0, 100);
+  const maxSize = clamp(finite(input?.maxSize, DEFAULT_MAX_SIZE), minSize, 100);
+  const collapsible = input?.collapsible === true;
+  const collapsedSize = clamp(finite(input?.collapsedSize, 0), 0, minSize);
+  return { minSize, maxSize, collapsible, collapsedSize };
+}
+
+function total(layout: number[]): number {
+  'worklet';
+  let sum = 0;
+  for (let index = 0; index < layout.length; index += 1) sum += layout[index]!;
+  return sum;
+}
+
+/**
+ * Pushes a layout onto exactly 100, moving each panel by its share of the room
+ * it has left in the direction the correction is going. Panels already against
+ * a limit therefore absorb none of it, which is what keeps a correction from
+ * quietly undoing the limit it just honoured.
+ *
+ * Four passes, because clamping after each one can hand the next a smaller
+ * remainder rather than none; it converges long before that in practice, and
+ * the bound is what stops a contradictory set of limits from spinning.
+ */
+function settle(layout: number[], constraints: SplitterConstraint[]): number[] {
+  'worklet';
+  const next = layout.slice();
+
+  for (let pass = 0; pass < 4; pass += 1) {
+    const remainder = 100 - total(next);
+    if (Math.abs(remainder) < 1e-6) break;
+
+    let room = 0;
+    const headroom: number[] = [];
+    for (let index = 0; index < next.length; index += 1) {
+      const constraint = constraints[index]!;
+      const available =
+        remainder > 0
+          ? constraint.maxSize - next[index]!
+          : next[index]! - panelFloor(constraint);
+      headroom.push(Math.max(available, 0));
+      room += Math.max(available, 0);
+    }
+    if (room <= 1e-6) break;
+
+    for (let index = 0; index < next.length; index += 1) {
+      next[index] = clamp(
+        next[index]! + (remainder * headroom[index]!) / room,
+        panelFloor(constraints[index]!),
+        constraints[index]!.maxSize
+      );
+    }
+  }
+
+  // Minimums that add up to more than the whole cannot all be honoured. Scaling
+  // the whole layout down is the failure that stays legible: every panel is
+  // smaller than it asked for, rather than the last one being pushed out of the
+  // container where nobody can see that it is there at all.
+  const sum = total(next);
+  if (sum > 100 + 1e-6) {
+    for (let index = 0; index < next.length; index += 1) {
+      next[index] = (next[index]! * 100) / sum;
+    }
+  }
+
+  return next;
+}
+
+/**
+ * Turns whatever sizes a caller gave into one layout that adds up.
+ *
+ * Panels with no size of their own split what the sized ones left over, so a
+ * three-pane splitter that only pins its sidebar gets the sensible reading of
+ * that: the sidebar keeps its number and the other two share the rest.
+ */
+export function resolveLayout(
+  sizes: (number | undefined)[],
+  constraints: SplitterConstraint[]
+): number[] {
+  if (constraints.length === 0) return [];
+
+  let claimed = 0;
+  let unsized = 0;
+  for (let index = 0; index < constraints.length; index += 1) {
+    const size = sizes[index];
+    if (typeof size === 'number' && Number.isFinite(size)) {
+      claimed += clamp(size, 0, 100);
+    } else {
+      unsized += 1;
+    }
+  }
+
+  const share = unsized > 0 ? Math.max(100 - claimed, 0) / unsized : 0;
+  const layout: number[] = [];
+  for (let index = 0; index < constraints.length; index += 1) {
+    const size = sizes[index];
+    const raw =
+      typeof size === 'number' && Number.isFinite(size) ? clamp(size, 0, 100) : share;
+    layout.push(
+      clamp(raw, panelFloor(constraints[index]!), constraints[index]!.maxSize)
+    );
+  }
+
+  return settle(layout, constraints);
+}
+
+/**
+ * A panel's size once it is below its minimum: shut if it is collapsible and
+ * the drag has gone more than halfway there, and otherwise held at the minimum.
+ *
+ * The halfway point is what makes collapsing feel like a decision rather than
+ * an accident — a finger that grazes the minimum springs back, and one that
+ * keeps going shuts the panel.
+ */
+function snapDown(size: number, constraint: SplitterConstraint): number {
+  'worklet';
+  if (size >= constraint.minSize) return size;
+  if (!constraint.collapsible) return constraint.minSize;
+  return size < (constraint.collapsedSize + constraint.minSize) / 2
+    ? constraint.collapsedSize
+    : constraint.minSize;
+}
+
+/**
+ * Moves one seam, in percent, and hands back the whole layout.
+ *
+ * Only the two panels either side of the seam change: a drag borrows from its
+ * neighbour and nobody else, so the panels further along stay exactly where the
+ * reader left them.
+ *
+ * Collapsing is only ever offered to the panel being shrunk. Both sides could
+ * technically be past their minimum at once at the end of a long drag, and
+ * shutting the panel that is currently growing is never what the drag meant.
+ */
+export function resizeLayout(
+  layout: number[],
+  boundary: number,
+  delta: number,
+  constraints: SplitterConstraint[]
+): number[] {
+  'worklet';
+  const next = layout.slice();
+  if (boundary < 0 || boundary + 1 >= next.length) return next;
+  if (!Number.isFinite(delta)) return next;
+
+  const first = constraints[boundary];
+  const second = constraints[boundary + 1];
+  if (!first || !second) return next;
+
+  const pair = next[boundary]! + next[boundary + 1]!;
+  let intended = next[boundary]! + delta;
+
+  if (delta < 0) {
+    intended = snapDown(intended, first);
+  } else if (delta > 0) {
+    intended = pair - snapDown(pair - intended, second);
+  }
+
+  const low = Math.max(panelFloor(first), pair - second.maxSize);
+  const high = Math.min(first.maxSize, pair - panelFloor(second));
+  if (low > high) return next;
+
+  next[boundary] = clamp(intended, low, high);
+  next[boundary + 1] = pair - next[boundary]!;
+  return next;
+}
+
+/** Where a seam sits, in percent, measured from the start of the splitter. */
+export function layoutOffset(layout: number[], boundary: number): number {
+  'worklet';
+  let offset = 0;
+  for (let index = 0; index <= boundary && index < layout.length; index += 1) {
+    offset += layout[index]!;
+  }
+  return offset;
+}
+
+/** Whether a panel is currently shut rather than merely small. */
+export function isCollapsed(size: number, constraint: SplitterConstraint): boolean {
+  'worklet';
+  return constraint.collapsible && size <= constraint.collapsedSize + 1e-6;
+}

package/src/components/steps/index.tsx

@@ -38,12 +38,19 @@ import {
   useState,
   type ReactNode,
 } from 'react';
-import { Pressable, View, type Text as RNText, type ViewProps } from 'react-native';
+import {
+  Pressable,
+  View,
+  type PressableProps,
+  type Text as RNText,
+  type ViewProps,
+} from 'react-native';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { CheckIcon } from '../../icons';
 import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { Spinner } from '../spinner';
+import { stepsTriggerDisabled } from './steps-trigger';
 
 export type StepState = 'active' | 'completed' | 'inactive' | 'loading';
 export type StepsOrientation = 'horizontal' | 'vertical';
@@ -293,7 +300,7 @@ const StepsItem = forwardRef<View, StepsItemProps>(
 );
 StepsItem.displayName = 'Steps.Item';
 
-export interface StepsTriggerProps extends ViewProps {
+export interface StepsTriggerProps extends PressableProps {
   className?: string;
   children?: ReactNode;
 }
@@ -308,11 +315,23 @@ const STATE_WORDS: Record<StepState, string> = {
 
 /** Makes its item selectable. Omit it for a read-only stepper. */
 const StepsTrigger = forwardRef<View, StepsTriggerProps>(
-  ({ className, children, ...props }, ref) => {
+  (
+    {
+      className,
+      children,
+      disabled,
+      onPress,
+      accessibilityState,
+      accessibilityValue,
+      ...props
+    },
+    ref
+  ) => {
     const { setActiveStep, orientation } = useSteps('Steps.Trigger');
     const { step, state, isDisabled } = useStepItem('Steps.Trigger');
     const placement = useContext(StepPositionContext);
-    const { trigger } = stepsVariants({ orientation, state, isDisabled });
+    const triggerDisabled = stepsTriggerDisabled(isDisabled, disabled);
+    const { trigger } = stepsVariants({ orientation, state, isDisabled: triggerDisabled });
 
     /*
      * Said as a value rather than a label, because the label is the step's own
@@ -327,13 +346,20 @@ const StepsTrigger = forwardRef<View, StepsTriggerProps>(
     return (
       <Pressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
-        accessibilityState={{ disabled: isDisabled, selected: state === 'active' }}
-        accessibilityValue={{ text: position }}
-        disabled={isDisabled}
-        onPress={() => setActiveStep(step)}
+        accessibilityState={{
+          ...accessibilityState,
+          disabled: triggerDisabled,
+          selected: state === 'active',
+        }}
+        accessibilityValue={{ ...accessibilityValue, text: position }}
+        disabled={triggerDisabled}
+        onPress={(event) => {
+          onPress?.(event);
+          setActiveStep(step);
+        }}
         className={trigger({ className })}
-        {...props}
       >
         {textChildren(children)}
       </Pressable>

package/src/components/steps/steps-trigger.ts

@@ -0,0 +1,6 @@
+export function stepsTriggerDisabled(
+  itemDisabled: boolean,
+  triggerDisabled: boolean | null | undefined
+): boolean {
+  return itemDisabled || !!triggerDisabled;
+}

package/src/components/tag-input/index.tsx

@@ -64,6 +64,7 @@ import { Text } from '../../primitives/text';
 import { selectionTick } from '../../utils/haptics';
 import { Chip, type ChipSize, type ChipVariant } from '../chip';
 import { Label } from '../label';
+import { reconcileMarkedTag, type MarkedTag } from './tag-input-state';
 
 /** Matches Input and Combobox, so the three read as the same control focused. */
 const FOCUS_DURATION = 150;
@@ -298,18 +299,18 @@ export const TagInput = forwardRef<TextInput, TagInputProps>(
      * itself, because with `allowDuplicates` two tags can read the same and
      * marking "the last one" has to mean the last one.
      */
-    const [marked, setMarked] = useState<number | null>(null);
+    const [marked, setMarked] = useState<MarkedTag | null>(null);
 
     const overflowing = max !== undefined && tags.length > max;
     const invalid = !!errorMessage || overflowing;
     const interactive = !disabled && !readOnly;
 
-    // The list can be emptied from outside, which would leave the mark pointing
-    // past the end of it — and a stale mark is a tag deleted by a backspace
-    // meant for the one that used to be there.
+    // A controlled list can be replaced or reordered between the two
+    // backspaces. Keep the mark only while the exact tag it armed still owns
+    // that slot, so a key press aimed at the old value cannot delete the new one.
     useEffect(() => {
-      if (marked !== null && marked >= tags.length) setMarked(null);
-    }, [marked, tags.length]);
+      setMarked((current) => reconcileMarkedTag(current, tags));
+    }, [tags]);
 
     const setText = useCallback(
       (next: string) => {
@@ -418,14 +419,15 @@ export const TagInput = forwardRef<TextInput, TagInputProps>(
         // what it always means, and the tags are none of its business.
         if (text.length > 0 || tags.length === 0) return;
 
-        if (marked !== null && marked < tags.length) {
-          removeAt(marked);
+        if (marked !== null && reconcileMarkedTag(marked, tags)) {
+          removeAt(marked.index);
           setMarked(null);
           return;
         }
-        setMarked(tags.length - 1);
+        const index = tags.length - 1;
+        setMarked({ index, tag: tags[index]! });
       },
-      [onKeyPress, text.length, tags.length, marked, removeAt]
+      [onKeyPress, text.length, tags, marked, removeAt]
     );
 
     const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(
@@ -541,7 +543,7 @@ export const TagInput = forwardRef<TextInput, TagInputProps>(
                     // The marked tag turns destructive rather than growing an
                     // outline: it is about to be deleted, and that is the one
                     // colour in the theme that already means exactly that.
-                    variant={marked === index ? 'destructive' : chipVariant}
+                    variant={marked?.index === index ? 'destructive' : chipVariant}
                     onClose={interactive ? () => removeAt(index) : undefined}
                     closeLabel={`Remove ${tag}`}
                     haptics={haptics}

package/src/components/tag-input/tag-input-state.ts

@@ -0,0 +1,18 @@
+/** The exact slot a first Backspace armed for removal. */
+export interface MarkedTag {
+  index: number;
+  tag: string;
+}
+
+/**
+ * Keeps an armed removal only while the same tag still occupies the same slot.
+ * Controlled fields can replace or reorder their value between key presses;
+ * a mark from the old value must never authorize deleting the new one.
+ */
+export function reconcileMarkedTag(
+  marked: MarkedTag | null,
+  tags: readonly string[]
+): MarkedTag | null {
+  if (marked === null) return null;
+  return tags[marked.index] === marked.tag ? marked : null;
+}

package/src/components/textarea/index.tsx

@@ -39,6 +39,7 @@ import type { KeyboardAvoidanceMode } from '../../hooks/use-keyboard-avoidance';
 import { KeyboardAvoider } from '../../primitives/keyboard-avoider';
 import { Text } from '../../primitives/text';
 import { Label } from '../label';
+import { textareaIsDisabled } from './textarea-disabled';
 
 /** Long enough to read as a transition, short enough not to lag a fast tab. */
 const FOCUS_DURATION = 150;
@@ -183,6 +184,8 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(
       onFocus,
       onBlur,
       onContentSizeChange,
+      editable,
+      accessibilityState,
       style,
       ...props
     },
@@ -190,6 +193,7 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(
   ) => {
     const [focused, setFocused] = useState(false);
     const invalid = !!errorMessage;
+    const isDisabled = textareaIsDisabled(disabled, editable);
 
     const metrics = METRICS[size];
     /* Both paddings plus the lines themselves — the box a row count asks for. */
@@ -225,7 +229,7 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(
     const slots = textareaVariants({
       variant,
       size,
-      disabled: !!disabled,
+      disabled: isDisabled,
       over,
     });
 
@@ -320,19 +324,19 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(
     const body = (
       <>
         {label ? (
-          <Label isRequired={isRequired} isInvalid={invalid} isDisabled={!!disabled}>
+          <Label isRequired={isRequired} isInvalid={invalid} isDisabled={isDisabled}>
             {label}
           </Label>
         ) : null}
         <AnimatedTextInput
           ref={ref}
           multiline
-          editable={!disabled}
+          editable={!isDisabled}
           onFocus={handleFocus}
           onBlur={handleBlur}
           onContentSizeChange={handleContentSizeChange}
           accessibilityLabel={label}
-          accessibilityState={{ disabled: !!disabled }}
+          accessibilityState={{ ...accessibilityState, disabled: isDisabled }}
           aria-required={isRequired}
           aria-invalid={invalid}
           className={slots.field({ className })}

package/src/components/textarea/textarea-disabled.ts

@@ -0,0 +1,6 @@
+export function textareaIsDisabled(
+  disabled: boolean | undefined,
+  editable: boolean | undefined
+): boolean {
+  return !!disabled || editable === false;
+}

package/src/components/timeline/index.tsx

@@ -65,6 +65,7 @@ import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { IconColorProvider } from '../../icons';
 import { Text, type TextProps, textChildren } from '../../primitives/text';
+import { timelineColumnWidth } from './timeline-geometry';
 
 export type TimelineVariant = 'dot' | 'icon' | 'numbered' | 'card' | 'compact';
 /** Semantic colour for a single event, independent of progress. */
@@ -87,10 +88,6 @@ const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
 const HORIZONTAL_RAIL_TOP = 64;
 const HORIZONTAL_TICK_HEIGHT = 10;
 
-/** A column with something to say, and one with nothing. */
-const HORIZONTAL_WIDE = 268;
-const HORIZONTAL_NARROW = 76;
-
 /**
  * How wide a column is: what it was given, else what its contents ask for.
  *
@@ -99,8 +96,6 @@ const HORIZONTAL_NARROW = 76;
  * snap point half a column out.
  */
 function itemWidth(props: TimelineItemProps): number {
-  if (typeof props.width === 'number') return props.width;
-
   let filled = false;
   Children.forEach(props.children, (child) => {
     if (filled || !isValidElement(child)) return;
@@ -110,7 +105,7 @@ function itemWidth(props: TimelineItemProps): number {
     if (inner !== undefined && inner !== null && inner !== false) filled = true;
   });
 
-  return filled ? HORIZONTAL_WIDE : HORIZONTAL_NARROW;
+  return timelineColumnWidth(props.width, filled);
 }
 
 /** Variants whose node is a filled disc rather than an outlined ring. */
@@ -265,6 +260,15 @@ interface TimelineItemContextValue {
   tone: TimelineTone;
   /** False on the last item, so its rail does not trail into nothing. */
   showSeparator: boolean;
+  /**
+   * Horizontal only: where this column starts, in points, and how wide it is.
+   *
+   * Both are worked out by the item, and the parts inside it need the same two
+   * numbers to fade against the scroll. Passing them down beats deriving them
+   * twice from measurements that would then be free to disagree.
+   */
+  offset: number;
+  columnWidth: number;
 }
 
 const TimelineContext = createContext<TimelineContextValue | null>(null);
@@ -425,6 +429,7 @@ export interface TimelineItemProps extends ViewProps {
    * carries none collapses to a tick — so a quiet stretch of the sequence
    * compresses instead of paying full width for nothing. Set it to override
    * that for a column that needs more or less room than its contents suggest.
+   * It must be finite and greater than zero; invalid values use the content default.
    */
   width?: number;
   children?: ReactNode;
@@ -439,6 +444,7 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
       tone = 'default',
       last = false,
       width,
+      style,
       children,
       ...props
     },
@@ -455,35 +461,53 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
     });
     const horizontal = orientation === 'horizontal';
 
-    const context = useMemo(
-      () => ({ step, completed: isCompleted, tone, showSeparator: !last }),
-      [step, isCompleted, tone, last]
-    );
-
     const columnWidth = horizontal
       ? itemWidth({ step, width, children } as TimelineItemProps)
       : undefined;
     const offset = offsets[step] ?? 0;
 
+    const context = useMemo(
+      () => ({
+        step,
+        completed: isCompleted,
+        tone,
+        showSeparator: !last,
+        offset,
+        columnWidth: columnWidth ?? 0,
+      }),
+      [step, isCompleted, tone, last, offset, columnWidth]
+    );
+
     /*
      * A column recedes as it leaves the reading edge, so the one being read is
-     * the one that looks read. The window is a column's own width either side,
-     * which keeps the neighbours legible — this is a timeline, and the value of
-     * it is being able to see what came before and after at once.
+     * the one that looks read.
+     *
+     * One column's width either side, not two: a window wide enough to hold
+     * three columns near full strength is a row where nothing is picked out,
+     * and picking one out is the whole job. The neighbours stay legible at the
+     * far end of it — a timeline is worth reading for what came before and
+     * after — they simply stop competing.
+     *
+     * The scale and the drop are what turn a fade into a focus. Four points and
+     * four percent is under the threshold where anybody would call it movement,
+     * and over the one where the column at the edge stops looking flat against
+     * the rest.
      */
     const columnStyle = useAnimatedStyle(() => {
-      if (!horizontal || !animate) return { opacity: 1 };
+      if (!horizontal || !animate) return { opacity: 1, transform: [] };
       const distance = Math.abs(scrollX.value - offset);
-      const window = Math.max(columnWidth ?? HORIZONTAL_WIDE, 1) * 2;
+      const window = Math.max(columnWidth ?? timelineColumnWidth(undefined, true), 1);
+      const away = interpolate(distance, [0, window], [0, 1], 'clamp');
       return {
-        opacity: interpolate(distance, [0, window], [1, 0.45], 'clamp'),
+        opacity: 1 - away * 0.4,
+        transform: [{ scale: 1 - away * 0.04 }, { translateY: away * 4 }],
       };
     });
 
     if (!horizontal) {
       return (
         <TimelineItemContext.Provider value={context}>
-          <View ref={ref} className={item({ className })} {...props}>
+          <View ref={ref} className={item({ className })} style={style} {...props}>
             {textChildren(children)}
           </View>
         </TimelineItemContext.Provider>
@@ -495,8 +519,8 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
         <Animated.View
           ref={ref}
           className={item({ className })}
-          style={[{ width: columnWidth }, columnStyle]}
           {...props}
+          style={[style, { width: columnWidth }, columnStyle]}
         >
           {textChildren(children)}
         </Animated.View>
@@ -647,15 +671,54 @@ TimelineIndicator.displayName = 'Timeline.Indicator';
  * so the connector runs unbroken.
  */
 const TimelineContent = forwardRef<View, ViewProps & { className?: string }>(
-  ({ className, children, ...props }, ref) => {
-    const { variant, orientation } = useTimeline('Timeline.Content');
-    const { completed, tone } = useTimelineItem('Timeline.Content');
+  ({ className, children, style, ...props }, ref) => {
+    const { variant, orientation, scrollX, animate } = useTimeline('Timeline.Content');
+    const { completed, tone, offset, columnWidth } =
+      useTimelineItem('Timeline.Content');
     const { body, panel } = timelineVariants({ variant, tone, completed, orientation });
+    const horizontal = orientation === 'horizontal';
+
+    /*
+     * Horizontal: the body recedes further than the column around it.
+     *
+     * The rail is a continuous thing and has to stay readable across the whole
+     * track — the years either side of the one being read are half of what a
+     * timeline is for. The prose under them is not: several columns of it at
+     * equal weight is a wall, and no amount of fading the column as a whole
+     * fixes that without taking the years down with it. So the body takes a
+     * second, steeper curve and the dates keep the first one.
+     */
+    const bodyStyle = useAnimatedStyle(() => {
+      if (!horizontal || !animate) return { opacity: 1 };
+      const distance = Math.abs(scrollX.value - offset);
+      const window = Math.max(columnWidth, 1);
+      return { opacity: interpolate(distance, [0, window], [1, 0.3], 'clamp') };
+    });
+
+    const inner =
+      variant === 'card' ? (
+        <View className={panel()}>{textChildren(children)}</View>
+      ) : (
+        children
+      );
+
+    if (!horizontal) {
+      return (
+        <View ref={ref} className={body({ className })} style={style} {...props}>
+          {inner}
+        </View>
+      );
+    }
 
     return (
-      <View ref={ref} className={body({ className })} {...props}>
-        {variant === 'card' ? <View className={panel()}>{textChildren(children)}</View> : children}
-      </View>
+      <Animated.View
+        ref={ref}
+        className={body({ className })}
+        {...props}
+        style={[style, bodyStyle]}
+      >
+        {inner}
+      </Animated.View>
     );
   }
 );