@lotics/ui 14.2.0 → 14.3.1

package/src/follow_scroll.tsx

@@ -1,5 +1,5 @@
-import { useRef, type ReactNode } from "react";
-import { ScrollView, StyleProp, ViewStyle, type NativeScrollEvent, type NativeSyntheticEvent } from "react-native";
+import { type ReactNode } from "react";
+import { FlatList, StyleProp, View, ViewStyle } from "react-native";
 
 export interface FollowScrollProps {
   children: ReactNode;
@@ -9,50 +9,45 @@ export interface FollowScrollProps {
   contentContainerStyle?: StyleProp<ViewStyle>;
 }
 
-// "At the bottom" tolerance: within this many px of the end still counts as
-// pinned, so sub-pixel scroll positions and streaming-growth rounding never
-// silently unpin the follow.
-const PIN_THRESHOLD = 40;
+const DATA = ["content"];
 
 /**
  * A scroll container that FOLLOWS its growing content — pinned to the bottom, it
  * keeps the newest content in view as children stream in (an `AgentRun` in a
- * dialog, a log feed). Scrolling up UNPINS it so the human can read history while
- * the content keeps growing; scrolling back to the bottom re-pins. Chat doesn't
- * need this (its message list is inverted, which follows by construction) — this
- * is for the plain top-down containers everywhere else: dialogs, drawers, panels.
+ * dialog, a log feed). Scrolling up releases the pin so the human can read
+ * history; scrolling back to the bottom re-pins.
+ *
+ * Implemented as a single-cell INVERTED list — the same mechanism as a chat
+ * message list — so the follow happens at LAYOUT level: the browser paints each
+ * growth already pinned (no scroll-after-paint flash, no scroll math). Short
+ * content still reads top-down (the content is end-justified in inverted
+ * coordinates); once it overflows, the newest edge stays in view natively. The
+ * inverted pattern's quirks (scrollbar thumb runs opposite, keyboard paging
+ * inverted) match the chat surface users already know.
  */
 export function FollowScroll(props: FollowScrollProps) {
   const { children, style, contentContainerStyle } = props;
-  const scrollRef = useRef<ScrollView>(null);
-  // Pinned state lives in a ref — it changes on every scroll tick and must never
-  // re-render the (streaming, already-busy) subtree.
-  const pinnedRef = useRef(true);
-
-  const followIfPinned = () => {
-    if (pinnedRef.current) scrollRef.current?.scrollToEnd({ animated: false });
-  };
-
-  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
-    const distanceFromBottom = contentSize.height - contentOffset.y - layoutMeasurement.height;
-    pinnedRef.current = distanceFromBottom < PIN_THRESHOLD;
-  };
-
   return (
-    <ScrollView
-      ref={scrollRef}
+    <FlatList
+      inverted
+      data={DATA}
+      keyExtractor={(k) => k}
+      // The consumer's content styles live on an inner wrapper INSIDE the cell —
+      // the cell renders upright (double flip), so authored padding keeps its
+      // visual orientation; the flipped outer container must not carry it.
+      renderItem={() => <View style={contentContainerStyle}>{children}</View>}
+      // Children identity changes every stream tick; without extraData the list
+      // would keep rendering the mounted cell's stale content.
+      extraData={children}
       style={style}
-      contentContainerStyle={contentContainerStyle}
-      // Content grew (a new part streamed in) or the frame resized (dialog
-      // re-measured) — both move the bottom edge, so both re-follow when pinned.
-      onContentSizeChange={followIfPinned}
-      onLayout={followIfPinned}
-      onScroll={onScroll}
-      scrollEventThrottle={16}
+      // flexGrow + flex-end top-aligns SHORT content (flex-end is the visual TOP
+      // in inverted coordinates), so a feed reads top-down until it overflows.
+      contentContainerStyle={followStyles.grow}
       nestedScrollEnabled
-    >
-      {children}
-    </ScrollView>
+    />
   );
 }
+
+const followStyles = {
+  grow: { flexGrow: 1, justifyContent: "flex-end" } as const,
+};