react-native-gtkx 0.2.0-alpha.2 → 0.3.0-alpha.1

package/dist/components/view.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useImperativeHandle, useLayoutEffect, useRef, } from "react";
 import { StyleSheet } from "../style/index";
-import { getViewBoxComponent, setBoxPassthrough, } from "../gtkx/bridge/index";
+import { getViewBoxComponent, setBoxOnly, setBoxPassthrough, setPointerTarget, } from "../gtkx/bridge/index";
 import { useResponder } from "../responder/use-responder";
 import { HostNodeContext } from "./host-node";
 import { createMeasureHandle } from "./measure";
+import { useFocusable, useFocusController } from "./use-focus";
 import { useLayoutChild, useRnContainer, } from "./use-layout-child";
 // Every View is a GtkBox subclass (RnGtkxViewBox) driven by RnGtkxLayout:
 // Yoga computes the children's rects, the manager's allocate() applies
@@ -16,10 +17,12 @@ import { useLayoutChild, useRnContainer, } from "./use-layout-child";
 //   view-box.ts) — the box is never the pick target while children stay
 //   pickable, and toggling never remounts the subtree;
 // - box-only: direct children (and thus their subtrees) get
-//   can-target=false; restored when the mode changes. Nesting another
-//   pointerEvents INSIDE a box-only view is not supported (the restore
-//   pass cannot know about it).
-export const View = ({ style, pointerEvents, onLayout, children, testID, ref, ...responderProps }) => {
+//   can-target=false, restored to what their OWN pointerEvents wants when
+//   the mode changes. That is why the bridge owns can-target rather than
+//   this component writing it: two things want the same boolean, and a
+//   blanket restore to `true` was what made nesting a pointerEvents inside
+//   a box-only view unsupported.
+export const View = ({ style, pointerEvents, onLayout, focusable = false, onFocus, onBlur, children, testID, ref, ...responderProps }) => {
     const widgetRef = useRef(null);
     const { host, node, cssClass } = useLayoutChild(widgetRef, {
         style,
@@ -27,6 +30,8 @@ export const View = ({ style, pointerEvents, onLayout, children, testID, ref, ..
     });
     useRnContainer(widgetRef, node);
     useImperativeHandle(ref, () => createMeasureHandle(widgetRef, node), [node]);
+    useFocusable(widgetRef, focusable);
+    useFocusController(widgetRef, onFocus, onBlur);
     // Spreading PanResponder's panHandlers onto a View is the portable RN
     // idiom, so every responder prop arrives here as a rest prop.
     useResponder(widgetRef, responderProps);
@@ -36,11 +41,15 @@ export const View = ({ style, pointerEvents, onLayout, children, testID, ref, ..
         if (!widget) {
             return;
         }
-        widget.setCanTarget(mode !== "none");
+        setPointerTarget(widget, mode !== "none");
         setBoxPassthrough(widget, mode === "box-none");
     }, [mode]);
-    // box-only walks the current children every commit (the set changes with
-    // renders) and restores once when the mode moves away.
+    // box-only re-runs every commit rather than on change, because the child
+    // set moves with the renders and a child that appears while the mode is on
+    // has to be masked too. Every View commits, and almost none of them are
+    // box-only, so the walk is skipped unless this view is masking now or was
+    // masking a moment ago — the one commit after the mode goes away is what
+    // gives the children their own modes back.
     const wasBoxOnly = useRef(false);
     useLayoutEffect(() => {
         const widget = widgetRef.current;
@@ -49,11 +58,7 @@ export const View = ({ style, pointerEvents, onLayout, children, testID, ref, ..
         }
         const boxOnly = mode === "box-only";
         if (boxOnly || wasBoxOnly.current) {
-            let child = widget.getFirstChild();
-            while (child) {
-                child.setCanTarget(!boxOnly);
-                child = child.getNextSibling();
-            }
+            setBoxOnly(widget, boxOnly);
         }
         wasBoxOnly.current = boxOnly;
     });

package/dist/components/view.js.map

@@ -1 +1 @@
-{"version":3,"file":"view.js","sourceRoot":"","sources":["../../src/components/view.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  type ReactNode,\n  type Ref,\n} from \"react\"\nimport { StyleSheet } from \"../style/index\"\nimport type { PointerEventsValue, StyleProp } from \"../contracts\"\nimport {\n  getViewBoxComponent,\n  GtkBox,\n  setBoxPassthrough,\n  type Gtk,\n} from \"../gtkx/bridge/index\"\nimport type { ResponderProps } from \"../responder/types\"\nimport { useResponder } from \"../responder/use-responder\"\nimport { HostNodeContext } from \"./host-node\"\nimport { createMeasureHandle, type MeasureHandle } from \"./measure\"\nimport {\n  useLayoutChild,\n  useRnContainer,\n  type LayoutEvent,\n} from \"./use-layout-child\"\n\n/** RN's imperative geometry methods, on a `View` ref. */\nexport type ViewHandle = MeasureHandle\n\nexport type ViewProps = ResponderProps & {\n  style?: StyleProp\n  // RN pointerEvents; the prop wins over style.pointerEvents (RN 0.71+).\n  pointerEvents?: PointerEventsValue\n  onLayout?: (event: LayoutEvent) => void\n  children?: ReactNode\n  testID?: string\n  // React 19 takes `ref` as an ordinary prop, which is what we want here:\n  // forwardRef is booby-trapped on this stack (useEffectEvent never\n  // refreshes inside it — see gtkx/bridge/use-signal.ts).\n  ref?: Ref<ViewHandle>\n}\n\n// Every View is a GtkBox subclass (RnGtkxViewBox) driven by RnGtkxLayout:\n// Yoga computes the children's rects, the manager's allocate() applies\n// them. Visual styles arrive as a GTK CSS class produced by the style\n// system. pointerEvents maps onto GTK picking:\n// - none: can-target=false — GTK skips the widget WITHOUT descending, the\n//   whole subtree is transparent (exact RN semantics);\n// - box-none: the subclass' contains() fails for this widget (see\n//   view-box.ts) — the box is never the pick target while children stay\n//   pickable, and toggling never remounts the subtree;\n// - box-only: direct children (and thus their subtrees) get\n//   can-target=false; restored when the mode changes. Nesting another\n//   pointerEvents INSIDE a box-only view is not supported (the restore\n//   pass cannot know about it).\nexport const View = ({\n  style,\n  pointerEvents,\n  onLayout,\n  children,\n  testID,\n  ref,\n  ...responderProps\n}: ViewProps) => {\n  const widgetRef = useRef<Gtk.Box | null>(null)\n  const { host, node, cssClass } = useLayoutChild(widgetRef, {\n    style,\n    onLayout,\n  })\n  useRnContainer(widgetRef, node)\n\n  useImperativeHandle(ref, () => createMeasureHandle(widgetRef, node), [node])\n\n  // Spreading PanResponder's panHandlers onto a View is the portable RN\n  // idiom, so every responder prop arrives here as a rest prop.\n  useResponder(widgetRef, responderProps)\n\n  const mode: PointerEventsValue =\n    pointerEvents ?? StyleSheet.flatten(style)?.pointerEvents ?? \"auto\"\n\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    widget.setCanTarget(mode !== \"none\")\n    setBoxPassthrough(widget, mode === \"box-none\")\n  }, [mode])\n\n  // box-only walks the current children every commit (the set changes with\n  // renders) and restores once when the mode moves away.\n  const wasBoxOnly = useRef(false)\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    const boxOnly = mode === \"box-only\"\n    if (boxOnly || wasBoxOnly.current) {\n      let child = widget.getFirstChild()\n      while (child) {\n        child.setCanTarget(!boxOnly)\n        child = child.getNextSibling()\n      }\n    }\n    wasBoxOnly.current = boxOnly\n  })\n\n  const ViewBox = getViewBoxComponent() as typeof GtkBox\n  return (\n    <ViewBox\n      ref={widgetRef}\n      name={testID}\n      cssClasses={cssClass ? [cssClass] : []}\n    >\n      <HostNodeContext.Provider\n        value={{ engine: host.engine, node, widgetRef }}\n      >\n        {children}\n      </HostNodeContext.Provider>\n    </ViewBox>\n  )\n}\n\n// RN parity aliases (no notches or status bars on the Linux desktop).\nexport const SafeAreaView = View\n\nexport const StatusBar = (): null => null\n"]}
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../src/components/view.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,mBAAmB,EACnB,eAAe,EACf,MAAM,GAGP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C,OAAO,EACL,mBAAmB,EAEnB,UAAU,EACV,iBAAiB,EACjB,gBAAgB,GAEjB,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAsB,MAAM,WAAW,CAAA;AACnE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAC9D,OAAO,EACL,cAAc,EACd,cAAc,GAEf,MAAM,oBAAoB,CAAA;AA2B3B,0EAA0E;AAC1E,uEAAuE;AACvE,sEAAsE;AACtE,+CAA+C;AAC/C,0EAA0E;AAC1E,uDAAuD;AACvD,kEAAkE;AAClE,wEAAwE;AACxE,uDAAuD;AACvD,4DAA4D;AAC5D,0EAA0E;AAC1E,yEAAyE;AACzE,uEAAuE;AACvE,2EAA2E;AAC3E,iCAAiC;AACjC,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,KAAK,EACL,aAAa,EACb,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,cAAc,EACP,EAAE,EAAE;IACd,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9C,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC,SAAS,EAAE;QACzD,KAAK;QACL,QAAQ;KACT,CAAC,CAAA;IACF,cAAc,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA;IAE/B,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAE5E,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAClC,kBAAkB,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;IAE9C,sEAAsE;IACtE,8DAA8D;IAC9D,YAAY,CAAC,SAAS,EAAE,cAAc,CAAC,CAAA;IAEvC,MAAM,IAAI,GACR,aAAa,IAAI,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,aAAa,IAAI,MAAM,CAAA;IAErE,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAA;QAChC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAM;QACR,CAAC;QACD,gBAAgB,CAAC,MAAM,EAAE,IAAI,KAAK,MAAM,CAAC,CAAA;QACzC,iBAAiB,CAAC,MAAM,EAAE,IAAI,KAAK,UAAU,CAAC,CAAA;IAChD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,yEAAyE;IACzE,2EAA2E;IAC3E,wEAAwE;IACxE,0EAA0E;IAC1E,yEAAyE;IACzE,2CAA2C;IAC3C,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAChC,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAA;QAChC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAM;QACR,CAAC;QACD,MAAM,OAAO,GAAG,IAAI,KAAK,UAAU,CAAA;QACnC,IAAI,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YAClC,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;QAC7B,CAAC;QACD,UAAU,CAAC,OAAO,GAAG,OAAO,CAAA;IAC9B,CAAC,CAAC,CAAA;IAEF,MAAM,OAAO,GAAG,mBAAmB,EAAmB,CAAA;IACtD,OAAO,CACL,KAAC,OAAO,IACN,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,YAEtC,KAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,YAE9C,QAAQ,GACgB,GACnB,CACX,CAAA;AACH,CAAC,CAAA;AAED,sEAAsE;AACtE,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAA;AAEhC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAS,EAAE,CAAC,IAAI,CAAA","sourcesContent":["import {\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  type ReactNode,\n  type Ref,\n} from \"react\"\nimport { StyleSheet } from \"../style/index\"\nimport type { PointerEventsValue, StyleProp } from \"../contracts\"\nimport {\n  getViewBoxComponent,\n  GtkBox,\n  setBoxOnly,\n  setBoxPassthrough,\n  setPointerTarget,\n  type Gtk,\n} from \"../gtkx/bridge/index\"\nimport type { ResponderProps } from \"../responder/types\"\nimport { useResponder } from \"../responder/use-responder\"\nimport { HostNodeContext } from \"./host-node\"\nimport { createMeasureHandle, type MeasureHandle } from \"./measure\"\nimport { useFocusable, useFocusController } from \"./use-focus\"\nimport {\n  useLayoutChild,\n  useRnContainer,\n  type LayoutEvent,\n} from \"./use-layout-child\"\n\n/** RN's imperative geometry methods, on a `View` ref. */\nexport type ViewHandle = MeasureHandle\n\nexport type ViewProps = ResponderProps & {\n  style?: StyleProp\n  // RN pointerEvents; the prop wins over style.pointerEvents (RN 0.71+).\n  pointerEvents?: PointerEventsValue\n  onLayout?: (event: LayoutEvent) => void\n  // RN's own prop (Android, Windows): puts the view into the keyboard focus\n  // chain. Off by default, as it is in RN — a desktop's Tab order is the\n  // app's to decide, not something a layout box should join by existing.\n  focusable?: boolean\n  // react-native-web and react-native-windows both put these on View; RN\n  // core has them on TextInput and the touchables. No argument, matching\n  // this platform's own TextInput.\n  onFocus?: () => void\n  onBlur?: () => void\n  children?: ReactNode\n  testID?: string\n  // React 19 takes `ref` as an ordinary prop, which is what we want here:\n  // forwardRef is booby-trapped on this stack (useEffectEvent never\n  // refreshes inside it — see gtkx/bridge/use-signal.ts).\n  ref?: Ref<ViewHandle>\n}\n\n// Every View is a GtkBox subclass (RnGtkxViewBox) driven by RnGtkxLayout:\n// Yoga computes the children's rects, the manager's allocate() applies\n// them. Visual styles arrive as a GTK CSS class produced by the style\n// system. pointerEvents maps onto GTK picking:\n// - none: can-target=false — GTK skips the widget WITHOUT descending, the\n//   whole subtree is transparent (exact RN semantics);\n// - box-none: the subclass' contains() fails for this widget (see\n//   view-box.ts) — the box is never the pick target while children stay\n//   pickable, and toggling never remounts the subtree;\n// - box-only: direct children (and thus their subtrees) get\n//   can-target=false, restored to what their OWN pointerEvents wants when\n//   the mode changes. That is why the bridge owns can-target rather than\n//   this component writing it: two things want the same boolean, and a\n//   blanket restore to `true` was what made nesting a pointerEvents inside\n//   a box-only view unsupported.\nexport const View = ({\n  style,\n  pointerEvents,\n  onLayout,\n  focusable = false,\n  onFocus,\n  onBlur,\n  children,\n  testID,\n  ref,\n  ...responderProps\n}: ViewProps) => {\n  const widgetRef = useRef<Gtk.Box | null>(null)\n  const { host, node, cssClass } = useLayoutChild(widgetRef, {\n    style,\n    onLayout,\n  })\n  useRnContainer(widgetRef, node)\n\n  useImperativeHandle(ref, () => createMeasureHandle(widgetRef, node), [node])\n\n  useFocusable(widgetRef, focusable)\n  useFocusController(widgetRef, onFocus, onBlur)\n\n  // Spreading PanResponder's panHandlers onto a View is the portable RN\n  // idiom, so every responder prop arrives here as a rest prop.\n  useResponder(widgetRef, responderProps)\n\n  const mode: PointerEventsValue =\n    pointerEvents ?? StyleSheet.flatten(style)?.pointerEvents ?? \"auto\"\n\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    setPointerTarget(widget, mode !== \"none\")\n    setBoxPassthrough(widget, mode === \"box-none\")\n  }, [mode])\n\n  // box-only re-runs every commit rather than on change, because the child\n  // set moves with the renders and a child that appears while the mode is on\n  // has to be masked too. Every View commits, and almost none of them are\n  // box-only, so the walk is skipped unless this view is masking now or was\n  // masking a moment ago — the one commit after the mode goes away is what\n  // gives the children their own modes back.\n  const wasBoxOnly = useRef(false)\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    const boxOnly = mode === \"box-only\"\n    if (boxOnly || wasBoxOnly.current) {\n      setBoxOnly(widget, boxOnly)\n    }\n    wasBoxOnly.current = boxOnly\n  })\n\n  const ViewBox = getViewBoxComponent() as typeof GtkBox\n  return (\n    <ViewBox\n      ref={widgetRef}\n      name={testID}\n      cssClasses={cssClass ? [cssClass] : []}\n    >\n      <HostNodeContext.Provider\n        value={{ engine: host.engine, node, widgetRef }}\n      >\n        {children}\n      </HostNodeContext.Provider>\n    </ViewBox>\n  )\n}\n\n// RN parity aliases (no notches or status bars on the Linux desktop).\nexport const SafeAreaView = View\n\nexport const StatusBar = (): null => null\n"]}

package/dist/components/virtualized-list.d.ts

@@ -1,6 +1,7 @@
-import { type ComponentType, type ReactElement } from "react";
+import { type ComponentType, type ReactElement, type ReactNode } from "react";
 import type { StyleProp } from "../contracts";
-import { type ScrollViewHandle, type ScrollViewProps } from "./scroll-view";
+import { type ScrollHandle, type ScrollViewProps } from "./scroll-view";
+import type { LayoutEvent } from "./use-layout-child";
 export type ListRenderItemInfo<T> = {
     item: T;
     index: number;
@@ -21,7 +22,7 @@ export type ViewabilityConfig = {
     viewAreaCoveragePercentThreshold?: number;
     minimumViewTime?: number;
 };
-export type VirtualizedListHandle = ScrollViewHandle & {
+export type VirtualizedListHandle = ScrollHandle & {
     scrollToIndex(params: {
         index: number;
         viewPosition?: number;
@@ -38,11 +39,27 @@ export type VirtualizedListHandle = ScrollViewHandle & {
     }): void;
 };
 export type VirtualizedListProps<T> = Omit<ScrollViewProps, "children"> & {
-    data: readonly T[];
+    data: readonly T[] | unknown;
+    /**
+     * RN's `VirtualizedList` accessor pair. Supplying them makes `data` opaque:
+     * the list asks `getItemCount(data)` for the length and `getItem(data, i)`
+     * for a row, and reads nothing else out of it. Left out (FlatList,
+     * SectionList) `data` is indexed directly.
+     *
+     * They are honoured LAZILY — `getItem` is called for the rows the window
+     * actually mounts, never for the whole range — because the point of the
+     * pair upstream is that the source need not be materialised.
+     *
+     * `never` for the `data` parameter is what makes an accessor written
+     * against a CONCRETE source (`(rows: Row[], i) => rows[i]`) assignable
+     * here: parameters are contravariant, and RN's own types say `any`.
+     */
+    getItem?: (data: never, index: number) => T;
+    getItemCount?: (data: never) => number;
     renderItem: (info: ListRenderItemInfo<T>) => ReactElement | null;
     keyExtractor?: (item: T, index: number) => string;
     estimatedItemSize?: number;
-    getItemLayout?: (data: readonly T[], index: number) => ItemLayout;
+    getItemLayout?: (data: never, index: number) => ItemLayout;
     windowSize?: number;
     initialNumToRender?: number;
     maxToRenderPerBatch?: number;
@@ -51,6 +68,29 @@ export type VirtualizedListProps<T> = Omit<ScrollViewProps, "children"> & {
     inverted?: boolean;
     refreshing?: boolean;
     onRefresh?: () => void;
+    /**
+     * RN's per-cell wrapper. The list still decides where a cell goes — the
+     * absolute `style` and the `onLayout` that measures it are handed in and
+     * must be applied — and this component owns everything else about the
+     * container, which is how a library adds a transform or a context to every
+     * row without touching `renderItem`.
+     *
+     * `react-native-draggable-flatlist` is the reason it exists here: its whole
+     * design is a cell renderer that translates the row being dragged and puts
+     * the "am I the active cell" context around it.
+     *
+     * NOT applied to a STICKY cell (`stickyHeaderIndices`): pinning works by
+     * reordering the cell's real GTK widget, so the sticky container has to be
+     * the cell. See docs/api.md.
+     */
+    CellRendererComponent?: ComponentType<{
+        cellKey: string;
+        index: number;
+        item: T;
+        style?: StyleProp;
+        onLayout?: (event: LayoutEvent) => void;
+        children?: ReactNode;
+    }>;
     ItemSeparatorComponent?: ComponentType | null;
     ListHeaderComponent?: ComponentType | ReactElement | null;
     ListFooterComponent?: ComponentType | ReactElement | null;

package/dist/components/virtualized-list.js

@@ -9,6 +9,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { perfAddTime, perfBurst, perfCount, perfEnabled, perfNow, } from "../perf";
 import { ActivityIndicator } from "./activity-indicator";
+import { registerHandleAlias } from "./measure";
+import { scrollPhaseSink, setScrollPhaseSink } from "./scroll-phase";
 import { ScrollView, StickySlot, } from "./scroll-view";
 import { View } from "./view";
 const renderAux = (component) => {
@@ -23,7 +25,26 @@ const renderAux = (component) => {
 };
 // First index whose offset-end is past `target` (binary search over prefix
 // sums; offsets has count+1 entries).
+//
+// The `target <= offsets[0]` guard is RN's, not an optimisation:
+// `elementsThatOverlapOffsets` treats the FIRST cell's start as INCLUSIVE and
+// every later cell's as exclusive (`mid === 0 && currentOffset <
+// scaledOffsetStart`), and that asymmetry is the whole reason a list of
+// ZERO-LENGTH cells resolves offset 0 to index 0 there. Without it the search
+// walks past every cell whose end is `<= target` — and a zero-length cell at
+// `target` always is — so it lands on the END of the run and the list mounts
+// only its last row.
+//
+// That is not a hypothetical shape. A `FlatList` whose cells each contain one
+// `position: absolute` child has zero flow height in EVERY cell, which is
+// exactly how `react-native-reanimated-dnd`'s `Sortable` renders (rows are
+// absolutely positioned and driven by a per-frame animated `top`), and how
+// any list that positions its own rows does. RN renders all of them; we
+// rendered one. See docs/research/dnd-differential.md.
 const indexAt = (offsets, target) => {
+    if (target <= offsets[0]) {
+        return 0;
+    }
     let low = 0;
     let high = offsets.length - 2;
     while (low < high) {
@@ -56,8 +77,28 @@ const CellMountProbe = () => {
     }, []);
     return null;
 };
-const VirtualizedListInner = forwardRef(({ data, renderItem, keyExtractor, estimatedItemSize = 44, getItemLayout, windowSize = DEFAULT_WINDOW_SIZE, initialNumToRender = 10, maxToRenderPerBatch = 10, updateCellsBatchingPeriod = 50, extraData, inverted = false, refreshing = false, onRefresh, ItemSeparatorComponent, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, onEndReached, onEndReachedThreshold = 0.1, onViewableItemsChanged, viewabilityConfig, onScroll, onContentSizeChange, onLayout, horizontal = false, stickyHeaderIndices, ...scrollProps }, ref) => {
-    const count = data.length;
+const VirtualizedListInner = forwardRef(({ data, getItem, getItemCount, renderItem, keyExtractor, estimatedItemSize = 44, getItemLayout, windowSize = DEFAULT_WINDOW_SIZE, initialNumToRender = 10, maxToRenderPerBatch = 10, updateCellsBatchingPeriod = 50, extraData, inverted = false, refreshing = false, onRefresh, CellRendererComponent, ItemSeparatorComponent, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, onEndReached, onEndReachedThreshold = 0.1, onViewableItemsChanged, viewabilityConfig, onScroll, onContentSizeChange, onLayout, horizontal = false, stickyHeaderIndices, ...scrollProps }, ref) => {
+    // The three reads the list makes of its data source, in the one place
+    // that knows which shape it was given. Everything below goes through
+    // them, so the windowing, the prefix sums, the viewability pass and the
+    // scroll handle are identical whether the source is an array or RN's
+    // opaque value plus accessors.
+    const source = data;
+    const count = getItemCount ? getItemCount(data) : source.length;
+    const itemAt = (index) => getItem ? getItem(data, index) : source[index];
+    const indexOfItem = (item) => {
+        if (!getItem) {
+            return source.indexOf(item);
+        }
+        // RN's own VirtualizedList scans for `scrollToItem` too — an opaque
+        // source has no index to ask.
+        for (let index = 0; index < count; index += 1) {
+            if (itemAt(index) === item) {
+                return index;
+            }
+        }
+        return -1;
+    };
     const scrollRef = useRef(null);
     const measured = useRef([]);
     const [version, setVersion] = useState(0);
@@ -267,7 +308,15 @@ const VirtualizedListInner = forwardRef(({ data, renderItem, keyExtractor, estim
             : { index, viewPosition, animated: params.animated };
         scrollToAxis(offsetForIndex(index, viewPosition), params.animated);
     };
-    useImperativeHandle(ref, () => ({
+    // The handle stands for the ScrollView this list renders: `findNodeHandle`
+    // on a list resolves to it (RN resolves a FlatList's the same way), and so
+    // does `measureLayout(listRef, …)` from another view. It gains no
+    // `measure()` of its own — see the note on VirtualizedListHandle.
+    const registerAlias = (handle) => {
+        registerHandleAlias(handle, () => scrollRef.current);
+        return handle;
+    };
+    useImperativeHandle(ref, () => registerAlias({
         // Any direct scroll cancels a pending scrollToIndex correction. The
         // caller always speaks RN-space offsets; inverted translates the main
         // axis into raw adjustment space.
@@ -298,7 +347,7 @@ const VirtualizedListInner = forwardRef(({ data, renderItem, keyExtractor, estim
         },
         scrollToIndex,
         scrollToItem: ({ item, viewPosition, animated }) => {
-            const index = data.indexOf(item);
+            const index = indexOfItem(item);
             if (index >= 0) {
                 scrollToIndex({ index, viewPosition, animated });
             }
@@ -404,7 +453,7 @@ const VirtualizedListInner = forwardRef(({ data, renderItem, keyExtractor, estim
                     viewable = true;
                 }
                 if (viewable) {
-                    const item = data[index];
+                    const item = itemAt(index);
                     eligible.set(keyOf(item, index), { item, index });
                 }
             }
@@ -494,6 +543,24 @@ const VirtualizedListInner = forwardRef(({ data, renderItem, keyExtractor, estim
             }
         }
     };
+    const toExposedEvent = (event) => {
+        if (!inverted) {
+            return event;
+        }
+        const raw = horizontal
+            ? event.nativeEvent.contentOffset.x
+            : event.nativeEvent.contentOffset.y;
+        const exposed = Math.max(0, maxRawScroll() - raw);
+        return {
+            nativeEvent: {
+                ...event.nativeEvent,
+                contentOffset: {
+                    x: horizontal ? exposed : event.nativeEvent.contentOffset.x,
+                    y: horizontal ? event.nativeEvent.contentOffset.y : exposed,
+                },
+            },
+        };
+    };
     const handleScroll = (event) => {
         const raw = horizontal
             ? event.nativeEvent.contentOffset.x
@@ -501,29 +568,25 @@ const VirtualizedListInner = forwardRef(({ data, renderItem, keyExtractor, estim
         scrollY.current = raw;
         if (inverted) {
             exposedOffset.current = Math.max(0, maxRawScroll() - raw);
-            // The caller sees RN-space offsets: contentOffset 0 is the far end
-            // where the data starts (a chat's latest message).
-            onScroll?.({
-                nativeEvent: {
-                    ...event.nativeEvent,
-                    contentOffset: {
-                        x: horizontal
-                            ? exposedOffset.current
-                            : event.nativeEvent.contentOffset.x,
-                        y: horizontal
-                            ? event.nativeEvent.contentOffset.y
-                            : exposedOffset.current,
-                    },
-                },
-            });
-        }
-        else {
-            onScroll?.(event);
         }
+        onScroll?.(toExposedEvent(event));
         updateRange();
         recomputeViewability();
         maybeFireEndReached();
     };
+    // Reanimated attaches one phase sink to the handler it hands us. This
+    // wrapper used to forward only the function call and silently dropped the
+    // sink, so every FlatList/VirtualizedList received onScroll but NONE of
+    // onBeginDrag/onEndDrag/momentum — direct ScrollView tests could not catch
+    // it. Carry the seam through the composite, translating inverted offsets
+    // exactly as the ordinary event path does.
+    const upstreamPhaseSink = scrollPhaseSink(onScroll);
+    if (upstreamPhaseSink) {
+        setScrollPhaseSink(handleScroll, {
+            wants: (phase) => upstreamPhaseSink.wants(phase),
+            deliver: (phase, event) => upstreamPhaseSink.deliver(phase, toExposedEvent(event)),
+        });
+    }
     const handleLayout = (event) => {
         onLayout?.(event);
         viewportH.current = horizontal
@@ -590,7 +653,7 @@ const VirtualizedListInner = forwardRef(({ data, renderItem, keyExtractor, estim
         }
     }
     const renderCell = (index) => {
-        const item = data[index];
+        const item = itemAt(index);
         const key = keyOf(item, index);
         // Vertical cells stretch across the width and sit at their offset;
         // horizontal cells stretch across the height and take their own
@@ -605,6 +668,9 @@ const VirtualizedListInner = forwardRef(({ data, renderItem, keyExtractor, estim
         if (stickySorted.includes(index)) {
             return (_jsx(StickySlot, { stickyKey: `cell-${key}`, top: cellStart(index), style: cellStyle, onLayout: measure, children: body }, key));
         }
+        if (CellRendererComponent) {
+            return (_jsx(CellRendererComponent, { cellKey: key, index: index, item: item, style: cellStyle, onLayout: measure, children: body }, key));
+        }
         return (_jsx(View, { style: cellStyle, onLayout: measure, children: body }, key));
     };
     const cells = [];