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

package/dist/dnd/sortable.js

@@ -0,0 +1,307 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// `Sortable`, `SortableItem`, `useSortable` and `useSortableList` — the
+// drag-to-reorder list, which is the shape most apps actually reach for.
+//
+// The reorder is LIVE: crossing another row moves the dragged row into its
+// place immediately, so the list rearranges under the drag icon. That is
+// upstream's behaviour too — its `onMove` fires as rows cross, not at the
+// end — minus the spring, because here the rows are laid out by Yoga rather
+// than transformed.
+//
+// The component owns the order, exactly as upstream requires ("do NOT update
+// external state in `onMove`"). An app reads the settled order from
+// `onDrop`'s `allPositions`.
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { ScrollView } from "../components/scroll-view";
+import { View } from "../components/view";
+import { DraggableContext, DraggableHandle } from "./draggable";
+import { DragSourceControllers, DropTargetControllers } from "./gtk-controllers";
+import { listToObject } from "./order";
+import { nextDraggableId } from "./payload";
+import { ScrollDirection, SortableDirection, } from "./types";
+// Upstream exports these from the same entry point as the components, so
+// they are re-exported here rather than moved; the implementations live in
+// ./order, which imports nothing from GTK.
+export { clamp, listToObject, objectMove } from "./order";
+const SortableContext = createContext(null);
+const keyOf = (item, index, extractor) => extractor?.(item, index) ?? item.id;
+/** The order state, shared by `useSortableList` and `Sortable`. */
+const useOrder = (data, itemKeyExtractor) => {
+    // Lazy initial state, not a ref: stable for the list's lifetime, and a ref
+    // may not be read during render.
+    const [scope] = useState(() => `sortable-${nextDraggableId()}`);
+    const incoming = useMemo(() => data.map((item, index) => keyOf(item, index, itemKeyExtractor)), [data, itemKeyExtractor]);
+    const [order, setOrder] = useState(incoming);
+    // The list owns the ORDER; the app owns the SET. Adding or removing an item
+    // has to reach the order without discarding a reorder the user already
+    // made — so new ids go to the end, departed ids drop out, and a pure
+    // reorder of `data` by the app is ignored (upstream's contract too: the
+    // component owns the order).
+    //
+    // Adjusted DURING RENDER rather than in an effect. React documents this as
+    // the way to derive state from changed props, and it matters here: an
+    // effect would paint one frame in the stale order every time the app
+    // appends an item.
+    const signature = incoming.join(" ");
+    const [seenSignature, setSeenSignature] = useState(signature);
+    if (seenSignature !== signature) {
+        setSeenSignature(signature);
+        const known = new Set(incoming);
+        const next = [
+            ...order.filter((id) => known.has(id)),
+            ...incoming.filter((id) => !order.includes(id)),
+        ];
+        if (next.length !== order.length ||
+            next.some((id, index) => id !== order[index])) {
+            setOrder(next);
+        }
+    }
+    const items = useMemo(() => {
+        const byId = new Map();
+        data.forEach((item, index) => {
+            byId.set(keyOf(item, index, itemKeyExtractor), item);
+        });
+        return order
+            .map((id) => byId.get(id))
+            .filter((item) => item !== undefined);
+    }, [order, data, itemKeyExtractor]);
+    return { scope, order, setOrder, items };
+};
+/** The `SharedValue`-shaped boxes upstream hands to `renderItem`. Real,
+ *  readable and writable here — just not animated. See `SharedValueLike`. */
+const useSharedBoxes = (order) => {
+    // Rebuilt when the order changes rather than mutated in place. Upstream's
+    // box keeps its identity and changes its `.value`; here the identity tracks
+    // the value, which is the closest thing available without a mutable cell
+    // React allows to be written during a render. The practical difference is
+    // that an app using `positions` as an effect dependency re-runs on a
+    // reorder — which is what it wanted from a SharedValue anyway.
+    const positions = useMemo(() => ({
+        value: listToObject(order),
+    }), [order]);
+    // These three this platform never writes: there is no UI-thread scroll
+    // position, no autoscroll during a drag (see docs/research/drag-and-drop.md)
+    // and no measured row heights, because Yoga lays rows out at their natural
+    // height. Stable, so forwarding them is free.
+    const idle = useMemo(() => ({
+        scrollY: { value: 0 },
+        autoScroll: { value: ScrollDirection.None },
+        itemHeights: { value: {} },
+    }), []);
+    const itemsCount = order.length;
+    return useMemo(() => ({
+        positions,
+        ...idle,
+        plumbing: () => ({
+            positions,
+            lowerBound: idle.scrollY,
+            autoScrollDirection: idle.autoScroll,
+            itemHeights: idle.itemHeights,
+            itemsCount,
+            isDynamicHeight: false,
+        }),
+    }), [positions, idle, itemsCount]);
+};
+/**
+ * Owns the order of a sortable list, for an app rendering its own container.
+ *
+ * **The order half only.** Upstream's rows get their drag wiring through the
+ * props `getItemProps` hands them; here it travels in context, which only
+ * `Sortable` provides — so rows still have to be inside a `Sortable`, and a
+ * `SortableItem` outside one throws rather than quietly not dragging. This
+ * hook is for reading the order and the `SharedValueLike` boxes, which is
+ * what most callers of it actually want.
+ */
+export const useSortableList = (options) => {
+    const { order, items } = useOrder(options.data, options.itemKeyExtractor);
+    const boxes = useSharedBoxes(order);
+    const dropProviderRef = useRef(null);
+    const noop = useCallback(() => { }, []);
+    return {
+        positions: boxes.positions,
+        scrollY: boxes.scrollY,
+        autoScroll: boxes.autoScroll,
+        itemHeights: boxes.itemHeights,
+        dropProviderRef,
+        handleScroll: noop,
+        handleScrollEnd: noop,
+        contentHeight: 0,
+        isDynamicHeight: false,
+        items,
+        getItemProps: boxes.plumbing,
+    };
+};
+/**
+ * A list whose rows reorder by dragging.
+ *
+ * ```tsx
+ * <Sortable
+ *   data={tasks}
+ *   onDrop={(id, position, all) => save(all)}
+ *   renderItem={({ item, id, ...rest }) => (
+ *     <SortableItem key={id} id={id} data={item} {...rest}>
+ *       <View style={styles.row}>
+ *         <Text>{item.title}</Text>
+ *         <SortableItem.Handle>
+ *           <Text>⠿</Text>
+ *         </SortableItem.Handle>
+ *       </View>
+ *     </SortableItem>
+ *   )}
+ * />
+ * ```
+ *
+ * The rows carry a real GTK drag icon — a picture of the row itself, lifted
+ * at the point it was grabbed — and the list rearranges live underneath it.
+ */
+export const Sortable = ({ data, renderItem, itemKeyExtractor, style, contentContainerStyle, testID, direction = SortableDirection.Vertical, onMove, onDragStart, onDrop, onDragging, }) => {
+    const { scope, order, setOrder, items } = useOrder(data, itemKeyExtractor);
+    const boxes = useSharedBoxes(order);
+    // The order as it was when the drag began, so a cancelled drag puts the
+    // list back rather than leaving it wherever the pointer happened to be.
+    const beforeDrag = useRef(null);
+    // The drag callbacks below run from GTK signals, long after any commit, so
+    // reading the order through a ref updated in an effect is both current and
+    // free of the stale-closure problem `useCallback` would otherwise have.
+    const orderRef = useRef(order);
+    useEffect(() => {
+        orderRef.current = order;
+    }, [order]);
+    const beginDrag = useCallback((draggedId) => {
+        beforeDrag.current = orderRef.current;
+        onDragStart?.(draggedId, orderRef.current.indexOf(draggedId));
+    }, [onDragStart]);
+    const moveOnto = useCallback((draggedId, targetId) => {
+        setOrder((current) => {
+            const from = current.indexOf(draggedId);
+            const to = current.indexOf(targetId);
+            if (from === -1 || to === -1 || from === to) {
+                return current;
+            }
+            const next = [...current];
+            next.splice(from, 1);
+            next.splice(to, 0, draggedId);
+            onMove?.(draggedId, from, to);
+            return next;
+        });
+    }, [setOrder, onMove]);
+    const endDrag = useCallback((draggedId, cancelled) => {
+        const restore = beforeDrag.current;
+        beforeDrag.current = null;
+        if (cancelled) {
+            if (restore) {
+                setOrder(() => restore);
+            }
+            return;
+        }
+        const settled = orderRef.current;
+        onDrop?.(draggedId, settled.indexOf(draggedId), listToObject(settled));
+    }, [setOrder, onDrop]);
+    const contextValue = useMemo(() => ({ scope, moveOnto, beginDrag, endDrag, onDragging }), [scope, moveOnto, beginDrag, endDrag, onDragging]);
+    if (direction === SortableDirection.Horizontal) {
+        // Loud rather than silent: a horizontal list that lays out vertically is
+        // a bug report waiting to happen. See docs/research/drag-and-drop.md for
+        // why the horizontal surface is deferred rather than approximated.
+        throw new Error("react-native-gtkx/dnd: SortableDirection.Horizontal is not implemented on Linux");
+    }
+    return (_jsx(SortableContext.Provider, { value: contextValue, children: _jsx(ScrollView, { style: style, 
+            // No `alignItems: "stretch"` override here any more. It used to be
+            // needed because this platform's ScrollView content container
+            // defaulted to `flex-start`, which shrank every row to its intrinsic
+            // width and collapsed the `flex: 1` text column inside it. That
+            // default was a parity bug — RN's content container is a plain
+            // `View`, whose default is `stretch` — and it is fixed at the source
+            // now (components/scroll-view.tsx), so a `Sortable` gets full-width
+            // rows the same way any other RN list does.
+            contentContainerStyle: contentContainerStyle, testID: testID, children: items.map((item, index) => renderItem({
+                item,
+                index,
+                id: keyOf(item, index, itemKeyExtractor),
+                direction,
+                ...boxes.plumbing(),
+            })) }) }));
+};
+/**
+ * The reorder half of the module, as a hook, for a row that owns its own
+ * view. Render `children` inside that view.
+ */
+export const useSortable = (options) => {
+    const { id, onDragging } = options;
+    const list = useContext(SortableContext);
+    if (list === null) {
+        // Loudly, because a silent no-op is the worst failure mode this repo has
+        // met: docs/research/gestures.md records `Animated.View` accepting the
+        // responder props and ignoring them, which compiled, ran, and did
+        // nothing. Unlike upstream — where a row gets its wiring through the
+        // props `getItemProps` hands it — the wiring here is in context, so a row
+        // outside its list has no drag at all rather than a degraded one.
+        throw new Error("react-native-gtkx/dnd: SortableItem/useSortable must be inside a Sortable");
+    }
+    const [isMoving, setIsMoving] = useState(false);
+    const [hasHandle, setHasHandle] = useState(false);
+    const registerHandle = useCallback((registered) => {
+        setHasHandle(registered);
+    }, []);
+    // Same reasoning as draggable.tsx: a handle registers one commit late, so
+    // the row's own copy waits for it rather than briefly mounting a second
+    // drag source.
+    const [mounted, setMounted] = useState(false);
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    useEffect(() => setMounted(true), []);
+    // Same list only — and INCLUDING this row itself. Refusing the self-drop
+    // looks right and is wrong: because the reorder happens live on `::enter`,
+    // by the time the pointer settles it is over the DRAGGED row, so a row that
+    // refuses its own payload leaves GDK with no target, cancels the drag, and
+    // the list snaps back to where it started. Accepting is also the honest
+    // reading: dropping a row on its own current position means "leave it
+    // here", which is a completed drag, not an abandoned one.
+    const accepts = useCallback((payload) => payload.scope === list.scope, [list]);
+    const dragControllers = (_jsx(DragSourceControllers, { payload: { scope: list.scope, id }, onDragBegin: () => {
+            setIsMoving(true);
+            list.beginDrag(id);
+        }, onDragEnd: (dropped) => {
+            setIsMoving(false);
+            list.endDrag(id, !dropped);
+        } }));
+    const dropControllers = (_jsx(DropTargetControllers, { accepts: accepts, 
+        // The reorder happens HERE, not on drop: crossing this row is what
+        // moves the dragged row into its place, so the list rearranges under
+        // the drag icon the way upstream's animated gaps do.
+        onEnter: (payload) => list.moveOnto(payload.id, id), onMotion: (payload, _x, y) => {
+            list.onDragging?.(payload.id, id, y);
+            onDragging?.(payload.id, id, y);
+        }, 
+        // Nothing left to do: the order is already right, and `drag-end` on the
+        // source is what settles it.
+        onDrop: () => { } }));
+    return {
+        animatedStyle: undefined,
+        isMoving,
+        hasHandle,
+        registerHandle,
+        dragControllers,
+        children: (_jsxs(_Fragment, { children: [mounted && !hasHandle ? dragControllers : null, dropControllers] })),
+    };
+};
+/** One row of a {@link Sortable}. Both a drag source and a drop target: the
+ *  row you drag onto is the position the dragged row takes. */
+export const SortableItem = ({ id, data, children, style, animatedStyle, testID, onMove, onDragStart, onDrop, onDragging, }) => {
+    const sortable = useSortable({
+        id,
+        data,
+        onMove,
+        onDragStart,
+        onDrop,
+        onDragging,
+    });
+    // `SortableItem.Handle` is `Draggable.Handle`: the same context carries the
+    // drag source to whichever view claims it, so one implementation serves
+    // both components.
+    const handleContext = useMemo(() => ({
+        source: sortable.dragControllers,
+        registerHandle: sortable.registerHandle,
+    }), [sortable.dragControllers, sortable.registerHandle]);
+    return (_jsx(View, { style: animatedStyle ? [style, animatedStyle] : style, testID: testID, children: _jsxs(DraggableContext.Provider, { value: handleContext, children: [sortable.children, children] }) }));
+};
+SortableItem.Handle = DraggableHandle;
+//# sourceMappingURL=sortable.js.map

package/dist/dnd/sortable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable.js","sourceRoot":"","sources":["../../src/dnd/sortable.tsx"],"names":[],"mappings":"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","sourcesContent":["// `Sortable`, `SortableItem`, `useSortable` and `useSortableList` — the\n// drag-to-reorder list, which is the shape most apps actually reach for.\n//\n// The reorder is LIVE: crossing another row moves the dragged row into its\n// place immediately, so the list rearranges under the drag icon. That is\n// upstream's behaviour too — its `onMove` fires as rows cross, not at the\n// end — minus the spring, because here the rows are laid out by Yoga rather\n// than transformed.\n//\n// The component owns the order, exactly as upstream requires (\"do NOT update\n// external state in `onMove`\"). An app reads the settled order from\n// `onDrop`'s `allPositions`.\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\"\nimport { ScrollView } from \"../components/scroll-view\"\nimport { View } from \"../components/view\"\nimport { DraggableContext, DraggableHandle } from \"./draggable\"\nimport { DragSourceControllers, DropTargetControllers } from \"./gtk-controllers\"\nimport { listToObject } from \"./order\"\nimport { nextDraggableId, type DragPayload } from \"./payload\"\nimport {\n  ScrollDirection,\n  SortableDirection,\n  type SharedValueLike,\n  type SortableData,\n  type SortableItemPlumbing,\n  type SortableItemProps,\n  type SortableProps,\n  type UseSortableListOptions,\n  type UseSortableListReturn,\n  type UseSortableOptions,\n  type UseSortableReturn,\n} from \"./types\"\n\n// Upstream exports these from the same entry point as the components, so\n// they are re-exported here rather than moved; the implementations live in\n// ./order, which imports nothing from GTK.\nexport { clamp, listToObject, objectMove } from \"./order\"\n\n// --- the list ---------------------------------------------------------------\n\ntype SortableContextValue = {\n  /** Namespaces this list's payloads, so dragging a row does not light up\n   *  every `Droppable` on the screen. */\n  scope: string\n  /** Called by a row when the dragged row crosses it. */\n  moveOnto: (draggedId: string, targetId: string) => void\n  beginDrag: (draggedId: string) => void\n  endDrag: (draggedId: string, cancelled: boolean) => void\n  onDragging?: (id: string, overItemId: string | null, y: number) => void\n}\n\nconst SortableContext = createContext<SortableContextValue | null>(null)\n\nconst keyOf = <TData extends SortableData>(\n  item: TData,\n  index: number,\n  extractor?: (item: TData, index: number) => string,\n): string => extractor?.(item, index) ?? item.id\n\n/** The order state, shared by `useSortableList` and `Sortable`. */\nconst useOrder = <TData extends SortableData>(\n  data: TData[],\n  itemKeyExtractor?: (item: TData, index: number) => string,\n) => {\n  // Lazy initial state, not a ref: stable for the list's lifetime, and a ref\n  // may not be read during render.\n  const [scope] = useState(() => `sortable-${nextDraggableId()}`)\n\n  const incoming = useMemo(\n    () => data.map((item, index) => keyOf(item, index, itemKeyExtractor)),\n    [data, itemKeyExtractor],\n  )\n  const [order, setOrder] = useState<string[]>(incoming)\n\n  // The list owns the ORDER; the app owns the SET. Adding or removing an item\n  // has to reach the order without discarding a reorder the user already\n  // made — so new ids go to the end, departed ids drop out, and a pure\n  // reorder of `data` by the app is ignored (upstream's contract too: the\n  // component owns the order).\n  //\n  // Adjusted DURING RENDER rather than in an effect. React documents this as\n  // the way to derive state from changed props, and it matters here: an\n  // effect would paint one frame in the stale order every time the app\n  // appends an item.\n  const signature = incoming.join(\" \")\n  const [seenSignature, setSeenSignature] = useState(signature)\n  if (seenSignature !== signature) {\n    setSeenSignature(signature)\n    const known = new Set(incoming)\n    const next = [\n      ...order.filter((id) => known.has(id)),\n      ...incoming.filter((id) => !order.includes(id)),\n    ]\n    if (\n      next.length !== order.length ||\n      next.some((id, index) => id !== order[index])\n    ) {\n      setOrder(next)\n    }\n  }\n\n  const items = useMemo(() => {\n    const byId = new Map<string, TData>()\n    data.forEach((item, index) => {\n      byId.set(keyOf(item, index, itemKeyExtractor), item)\n    })\n    return order\n      .map((id) => byId.get(id))\n      .filter((item): item is TData => item !== undefined)\n  }, [order, data, itemKeyExtractor])\n\n  return { scope, order, setOrder, items }\n}\n\n/** The `SharedValue`-shaped boxes upstream hands to `renderItem`. Real,\n *  readable and writable here — just not animated. See `SharedValueLike`. */\nconst useSharedBoxes = (order: string[]) => {\n  // Rebuilt when the order changes rather than mutated in place. Upstream's\n  // box keeps its identity and changes its `.value`; here the identity tracks\n  // the value, which is the closest thing available without a mutable cell\n  // React allows to be written during a render. The practical difference is\n  // that an app using `positions` as an effect dependency re-runs on a\n  // reorder — which is what it wanted from a SharedValue anyway.\n  const positions = useMemo(\n    (): SharedValueLike<Record<string, number>> => ({\n      value: listToObject(order),\n    }),\n    [order],\n  )\n  // These three this platform never writes: there is no UI-thread scroll\n  // position, no autoscroll during a drag (see docs/research/drag-and-drop.md)\n  // and no measured row heights, because Yoga lays rows out at their natural\n  // height. Stable, so forwarding them is free.\n  const idle = useMemo(\n    () => ({\n      scrollY: { value: 0 },\n      autoScroll: { value: ScrollDirection.None as ScrollDirection },\n      itemHeights: { value: {} as Record<string, number> },\n    }),\n    [],\n  )\n\n  const itemsCount = order.length\n\n  return useMemo(\n    () => ({\n      positions,\n      ...idle,\n      plumbing: (): SortableItemPlumbing => ({\n        positions,\n        lowerBound: idle.scrollY,\n        autoScrollDirection: idle.autoScroll,\n        itemHeights: idle.itemHeights,\n        itemsCount,\n        isDynamicHeight: false,\n      }),\n    }),\n    [positions, idle, itemsCount],\n  )\n}\n\n/**\n * Owns the order of a sortable list, for an app rendering its own container.\n *\n * **The order half only.** Upstream's rows get their drag wiring through the\n * props `getItemProps` hands them; here it travels in context, which only\n * `Sortable` provides — so rows still have to be inside a `Sortable`, and a\n * `SortableItem` outside one throws rather than quietly not dragging. This\n * hook is for reading the order and the `SharedValueLike` boxes, which is\n * what most callers of it actually want.\n */\nexport const useSortableList = <TData extends SortableData>(\n  options: UseSortableListOptions<TData>,\n): UseSortableListReturn<TData> => {\n  const { order, items } = useOrder(options.data, options.itemKeyExtractor)\n  const boxes = useSharedBoxes(order)\n  const dropProviderRef = useRef(null)\n  const noop = useCallback(() => {}, [])\n\n  return {\n    positions: boxes.positions,\n    scrollY: boxes.scrollY,\n    autoScroll: boxes.autoScroll,\n    itemHeights: boxes.itemHeights,\n    dropProviderRef,\n    handleScroll: noop,\n    handleScrollEnd: noop,\n    contentHeight: 0,\n    isDynamicHeight: false,\n    items,\n    getItemProps: boxes.plumbing,\n  }\n}\n\n/**\n * A list whose rows reorder by dragging.\n *\n * ```tsx\n * <Sortable\n *   data={tasks}\n *   onDrop={(id, position, all) => save(all)}\n *   renderItem={({ item, id, ...rest }) => (\n *     <SortableItem key={id} id={id} data={item} {...rest}>\n *       <View style={styles.row}>\n *         <Text>{item.title}</Text>\n *         <SortableItem.Handle>\n *           <Text>⠿</Text>\n *         </SortableItem.Handle>\n *       </View>\n *     </SortableItem>\n *   )}\n * />\n * ```\n *\n * The rows carry a real GTK drag icon — a picture of the row itself, lifted\n * at the point it was grabbed — and the list rearranges live underneath it.\n */\nexport const Sortable = <TData extends SortableData>({\n  data,\n  renderItem,\n  itemKeyExtractor,\n  style,\n  contentContainerStyle,\n  testID,\n  direction = SortableDirection.Vertical,\n  onMove,\n  onDragStart,\n  onDrop,\n  onDragging,\n}: SortableProps<TData>): ReactNode => {\n  const { scope, order, setOrder, items } = useOrder(data, itemKeyExtractor)\n  const boxes = useSharedBoxes(order)\n\n  // The order as it was when the drag began, so a cancelled drag puts the\n  // list back rather than leaving it wherever the pointer happened to be.\n  const beforeDrag = useRef<string[] | null>(null)\n  // The drag callbacks below run from GTK signals, long after any commit, so\n  // reading the order through a ref updated in an effect is both current and\n  // free of the stale-closure problem `useCallback` would otherwise have.\n  const orderRef = useRef(order)\n  useEffect(() => {\n    orderRef.current = order\n  }, [order])\n\n  const beginDrag = useCallback(\n    (draggedId: string) => {\n      beforeDrag.current = orderRef.current\n      onDragStart?.(draggedId, orderRef.current.indexOf(draggedId))\n    },\n    [onDragStart],\n  )\n\n  const moveOnto = useCallback(\n    (draggedId: string, targetId: string) => {\n      setOrder((current) => {\n        const from = current.indexOf(draggedId)\n        const to = current.indexOf(targetId)\n        if (from === -1 || to === -1 || from === to) {\n          return current\n        }\n        const next = [...current]\n        next.splice(from, 1)\n        next.splice(to, 0, draggedId)\n        onMove?.(draggedId, from, to)\n        return next\n      })\n    },\n    [setOrder, onMove],\n  )\n\n  const endDrag = useCallback(\n    (draggedId: string, cancelled: boolean) => {\n      const restore = beforeDrag.current\n      beforeDrag.current = null\n      if (cancelled) {\n        if (restore) {\n          setOrder(() => restore)\n        }\n        return\n      }\n      const settled = orderRef.current\n      onDrop?.(draggedId, settled.indexOf(draggedId), listToObject(settled))\n    },\n    [setOrder, onDrop],\n  )\n\n  const contextValue = useMemo<SortableContextValue>(\n    () => ({ scope, moveOnto, beginDrag, endDrag, onDragging }),\n    [scope, moveOnto, beginDrag, endDrag, onDragging],\n  )\n\n  if (direction === SortableDirection.Horizontal) {\n    // Loud rather than silent: a horizontal list that lays out vertically is\n    // a bug report waiting to happen. See docs/research/drag-and-drop.md for\n    // why the horizontal surface is deferred rather than approximated.\n    throw new Error(\n      \"react-native-gtkx/dnd: SortableDirection.Horizontal is not implemented on Linux\",\n    )\n  }\n\n  return (\n    <SortableContext.Provider value={contextValue}>\n      <ScrollView\n        style={style}\n        // No `alignItems: \"stretch\"` override here any more. It used to be\n        // needed because this platform's ScrollView content container\n        // defaulted to `flex-start`, which shrank every row to its intrinsic\n        // width and collapsed the `flex: 1` text column inside it. That\n        // default was a parity bug — RN's content container is a plain\n        // `View`, whose default is `stretch` — and it is fixed at the source\n        // now (components/scroll-view.tsx), so a `Sortable` gets full-width\n        // rows the same way any other RN list does.\n        contentContainerStyle={contentContainerStyle}\n        testID={testID}\n      >\n        {items.map((item, index) =>\n          renderItem({\n            item,\n            index,\n            id: keyOf(item, index, itemKeyExtractor),\n            direction,\n            ...boxes.plumbing(),\n          }),\n        )}\n      </ScrollView>\n    </SortableContext.Provider>\n  )\n}\n\n/**\n * The reorder half of the module, as a hook, for a row that owns its own\n * view. Render `children` inside that view.\n */\nexport const useSortable = <TData,>(\n  options: UseSortableOptions<TData>,\n): UseSortableReturn => {\n  const { id, onDragging } = options\n  const list = useContext(SortableContext)\n  if (list === null) {\n    // Loudly, because a silent no-op is the worst failure mode this repo has\n    // met: docs/research/gestures.md records `Animated.View` accepting the\n    // responder props and ignoring them, which compiled, ran, and did\n    // nothing. Unlike upstream — where a row gets its wiring through the\n    // props `getItemProps` hands it — the wiring here is in context, so a row\n    // outside its list has no drag at all rather than a degraded one.\n    throw new Error(\n      \"react-native-gtkx/dnd: SortableItem/useSortable must be inside a Sortable\",\n    )\n  }\n  const [isMoving, setIsMoving] = useState(false)\n  const [hasHandle, setHasHandle] = useState(false)\n\n  const registerHandle = useCallback((registered: boolean) => {\n    setHasHandle(registered)\n  }, [])\n\n  // Same reasoning as draggable.tsx: a handle registers one commit late, so\n  // the row's own copy waits for it rather than briefly mounting a second\n  // drag source.\n  const [mounted, setMounted] = useState(false)\n  // eslint-disable-next-line react-hooks/set-state-in-effect\n  useEffect(() => setMounted(true), [])\n\n  // Same list only — and INCLUDING this row itself. Refusing the self-drop\n  // looks right and is wrong: because the reorder happens live on `::enter`,\n  // by the time the pointer settles it is over the DRAGGED row, so a row that\n  // refuses its own payload leaves GDK with no target, cancels the drag, and\n  // the list snaps back to where it started. Accepting is also the honest\n  // reading: dropping a row on its own current position means \"leave it\n  // here\", which is a completed drag, not an abandoned one.\n  const accepts = useCallback(\n    (payload: DragPayload) => payload.scope === list.scope,\n    [list],\n  )\n\n  const dragControllers = (\n    <DragSourceControllers\n      payload={{ scope: list.scope, id }}\n      onDragBegin={() => {\n        setIsMoving(true)\n        list.beginDrag(id)\n      }}\n      onDragEnd={(dropped) => {\n        setIsMoving(false)\n        list.endDrag(id, !dropped)\n      }}\n    />\n  )\n\n  const dropControllers = (\n    <DropTargetControllers\n      accepts={accepts}\n      // The reorder happens HERE, not on drop: crossing this row is what\n      // moves the dragged row into its place, so the list rearranges under\n      // the drag icon the way upstream's animated gaps do.\n      onEnter={(payload) => list.moveOnto(payload.id, id)}\n      onMotion={(payload, _x, y) => {\n        list.onDragging?.(payload.id, id, y)\n        onDragging?.(payload.id, id, y)\n      }}\n      // Nothing left to do: the order is already right, and `drag-end` on the\n      // source is what settles it.\n      onDrop={() => {}}\n    />\n  )\n\n  return {\n    animatedStyle: undefined,\n    isMoving,\n    hasHandle,\n    registerHandle,\n    dragControllers,\n    children: (\n      <>\n        {mounted && !hasHandle ? dragControllers : null}\n        {dropControllers}\n      </>\n    ),\n  }\n}\n\n/** One row of a {@link Sortable}. Both a drag source and a drop target: the\n *  row you drag onto is the position the dragged row takes. */\nexport const SortableItem = <TData,>({\n  id,\n  data,\n  children,\n  style,\n  animatedStyle,\n  testID,\n  onMove,\n  onDragStart,\n  onDrop,\n  onDragging,\n}: SortableItemProps<TData>): ReactNode => {\n  const sortable = useSortable<TData>({\n    id,\n    data,\n    onMove,\n    onDragStart,\n    onDrop,\n    onDragging,\n  } as UseSortableOptions<TData>)\n\n  // `SortableItem.Handle` is `Draggable.Handle`: the same context carries the\n  // drag source to whichever view claims it, so one implementation serves\n  // both components.\n  const handleContext = useMemo(\n    () => ({\n      source: sortable.dragControllers,\n      registerHandle: sortable.registerHandle,\n    }),\n    [sortable.dragControllers, sortable.registerHandle],\n  )\n\n  return (\n    <View\n      style={animatedStyle ? [style, animatedStyle] : style}\n      testID={testID}\n    >\n      <DraggableContext.Provider value={handleContext}>\n        {sortable.children}\n        {children}\n      </DraggableContext.Provider>\n    </View>\n  )\n}\n\nSortableItem.Handle = DraggableHandle\n"]}

package/dist/dnd/types.d.ts

@@ -0,0 +1,290 @@
+import type { ReactNode, RefObject } from "react";
+import type { StyleProp } from "../contracts";
+/**
+ * What `SharedValue<T>` degrades to here.
+ *
+ * Reanimated's `SharedValue<T>` is `{ value: T }` plus the worklet plumbing
+ * that makes writes cross to the UI thread. There is no UI thread on this
+ * platform, so this is the same box without the crossing: **reads and
+ * writes both work**, they just do not drive an animation.
+ *
+ * That matters more than it looks. `positions`, `lowerBound`,
+ * `autoScrollDirection` and `itemHeights` appear in
+ * `SortableRenderItemProps` — public API an app forwards with `{...rest}`
+ * and, occasionally, reads. Typing them as an opaque token would break the
+ * reads; typing them as this keeps them working.
+ */
+export type SharedValueLike<T> = {
+    value: T;
+};
+export declare enum DraggableState {
+    IDLE = "IDLE",
+    DRAGGING = "DRAGGING",
+    DROPPED = "DROPPED"
+}
+export type AnimationFunction = (toValue: number) => number;
+export type CollisionAlgorithm = "center" | "intersect" | "contain";
+export interface UseDraggableOptions<TData = unknown> {
+    data: TData;
+    draggableId?: string;
+    dragDisabled?: boolean;
+    onDragStart?: (data: TData) => void;
+    onDragEnd?: (data: TData) => void;
+    onDragging?: (payload: {
+        x: number;
+        y: number;
+        tx: number;
+        ty: number;
+        itemData: TData;
+    }) => void;
+    onStateChange?: (state: DraggableState) => void;
+    /**
+     * Accepted and ignored. Upstream uses it to tell a tap from a drag; GDK
+     * already does that with `gtk-dnd-drag-threshold` before it starts a drag
+     * at all, so honouring it would only make dragging feel slower.
+     */
+    preDragDelay?: number;
+    /**
+     * Accepted and ignored. GDK hit-tests the pointer against the real widget
+     * tree; of the three upstream algorithms `"center"` is closest, since the
+     * drag icon is carried at the point it was grabbed.
+     */
+    collisionAlgorithm?: CollisionAlgorithm;
+    /** Unsupported: the compositor carries the drag icon and nothing here can
+     *  constrain its path. Kept in the type so a shared file still compiles
+     *  for iOS and Android. */
+    dragAxis?: "x" | "y" | "both";
+    /** Unsupported, same reason as `dragAxis`. */
+    dragBoundsRef?: RefObject<unknown>;
+    /** Unsupported: there is no return animation, because the view never
+     *  left — GDK drew a picture of it instead. */
+    animationFunction?: AnimationFunction;
+}
+export interface UseDraggableReturn {
+    /** Spread onto the view that should be draggable. Upstream's name for it
+     *  is `animatedViewProps`; the props are a `style` and the drag
+     *  controllers, which on this platform are React children rather than a
+     *  style. */
+    animatedViewProps: {
+        style?: StyleProp;
+        children: ReactNode;
+    };
+    state: DraggableState;
+    hasHandle: boolean;
+    registerHandle: (registered: boolean) => void;
+}
+export interface DraggableProps<TData = unknown> extends UseDraggableOptions<TData> {
+    style?: StyleProp;
+    children: ReactNode;
+    testID?: string;
+}
+export interface DraggableHandleProps {
+    children: ReactNode;
+    style?: StyleProp;
+    testID?: string;
+}
+export type DropAlignment = "center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export interface DropOffset {
+    x: number;
+    y: number;
+}
+export interface UseDroppableOptions<TData = unknown> {
+    onDrop: (data: TData) => void;
+    dropDisabled?: boolean;
+    onActiveChange?: (isActive: boolean) => void;
+    activeStyle?: StyleProp;
+    droppableId?: string;
+    /** How many draggables this zone accepts. When it is full GDK is told to
+     *  REFUSE the drop, so the pointer shows the no-drop cursor — upstream
+     *  silently skips the slot instead. */
+    capacity?: number;
+    /** Unsupported: both of these place the dragged view inside the zone
+     *  after the drop, and the view never moved. */
+    dropAlignment?: DropAlignment;
+    dropOffset?: DropOffset;
+}
+export interface UseDroppableReturn {
+    viewProps: {
+        style?: StyleProp;
+        children: ReactNode;
+    };
+    isActive: boolean;
+    activeStyle?: StyleProp;
+}
+export interface DroppableProps<TData = unknown> extends UseDroppableOptions<TData> {
+    style?: StyleProp;
+    children: ReactNode;
+    testID?: string;
+}
+export interface DroppedItemsMap<TData = unknown> {
+    [draggableId: string]: {
+        droppableId: string;
+        data: TData;
+    };
+}
+export interface DropProviderProps {
+    children: ReactNode;
+    onDroppedItemsUpdate?: (droppedItems: DroppedItemsMap) => void;
+    onDragStart?: (data: unknown) => void;
+    onDragEnd?: (data: unknown) => void;
+    onDragging?: (payload: {
+        x: number;
+        y: number;
+        tx: number;
+        ty: number;
+        itemData: unknown;
+    }) => void;
+    /** Accepted and ignored: there is no layout pass to complete, because
+     *  nothing caches a slot rectangle. See `requestPositionUpdate`. */
+    onLayoutUpdateComplete?: () => void;
+    style?: StyleProp;
+    testID?: string;
+    ref?: RefObject<DropProviderRef | null>;
+}
+export interface DropProviderRef {
+    /**
+     * A no-op **because GDK re-hit-tests on every motion**. Upstream needs it
+     * to refresh cached slot rectangles after a scroll or a relayout; there
+     * are no cached rectangles here, so calling it is harmless and
+     * unnecessary. Kept so an app that calls it after a list update compiles.
+     */
+    requestPositionUpdate: () => void;
+    getDroppedItems: () => DroppedItemsMap;
+}
+export interface SortableData {
+    id: string;
+}
+export declare enum ScrollDirection {
+    None = "none",
+    Up = "up",
+    Down = "down"
+}
+export declare enum HorizontalScrollDirection {
+    None = "none",
+    Left = "left",
+    Right = "right"
+}
+export declare enum SortableDirection {
+    Vertical = "vertical",
+    Horizontal = "horizontal"
+}
+/** The plumbing `Sortable` hands `renderItem` and `renderItem` hands
+ *  `SortableItem` — opaque in upstream's own examples, which destructure
+ *  `item`/`index`/`id` and spread the rest. */
+export interface SortableItemPlumbing {
+    positions: SharedValueLike<Record<string, number>>;
+    lowerBound: SharedValueLike<number>;
+    autoScrollDirection: SharedValueLike<ScrollDirection>;
+    itemHeights: SharedValueLike<Record<string, number>>;
+    itemsCount: number;
+    /** Accepted and ignored: Yoga lays rows out at their natural height, so
+     *  a height hint has nothing to correct. */
+    itemHeight?: number;
+    /** Accepted and ignored, same reason. */
+    estimatedItemHeight?: number;
+    /**
+     * Accepted and ignored. Upstream needs the container's height to know
+     * when a dragged row has reached an edge and autoscroll should start;
+     * there is no autoscroll here (docs/research/drag-and-drop.md), and the
+     * rows are in flow layout inside a real `ScrollView` that already knows
+     * its own size.
+     *
+     * Kept because upstream's own example app passes it on every
+     * `SortableItem` — a mirror that drops it turns a literal port into an
+     * edit, which is the one thing this module exists to avoid.
+     */
+    containerHeight?: number;
+    /** Accepted and ignored, same reason. */
+    isDynamicHeight?: boolean;
+    scheduleHeightUpdate?: (id: string, height: number) => void;
+}
+export interface SortableCallbacks {
+    onMove?: (id: string, from: number, to: number) => void;
+    onDragStart?: (id: string, position: number) => void;
+    onDrop?: (id: string, position: number, allPositions?: Record<string, number>) => void;
+    onDragging?: (id: string, overItemId: string | null, yPosition: number) => void;
+}
+export interface UseSortableOptions<TData = unknown> extends SortableCallbacks, SortableItemPlumbing {
+    id: string;
+    data?: TData;
+}
+export interface UseSortableReturn {
+    /** Upstream returns a Reanimated style here. This platform reorders by
+     *  re-rendering, so the row needs no transform — the field stays for
+     *  spread compatibility. */
+    animatedStyle: StyleProp;
+    isMoving: boolean;
+    hasHandle: boolean;
+    registerHandle: (registered: boolean) => void;
+    /** Everything the row's view must contain: the drop target always, and the
+     *  drag source unless a handle has claimed it. */
+    children: ReactNode;
+    /** The drag source on its own, for a caller placing its own handle. */
+    dragControllers: ReactNode;
+}
+export interface SortableItemProps<TData = unknown> extends Partial<SortableItemPlumbing>, SortableCallbacks {
+    id: string;
+    data?: TData;
+    children: ReactNode;
+    style?: StyleProp;
+    /** Accepted for spread compatibility; upstream's own transform style. */
+    animatedStyle?: StyleProp;
+    direction?: SortableDirection;
+    testID?: string;
+}
+export interface SortableRenderItemProps<TData extends SortableData> extends SortableItemPlumbing {
+    item: TData;
+    index: number;
+    id: string;
+    direction?: SortableDirection;
+}
+export interface SortableProps<TData extends SortableData> extends SortableCallbacks {
+    data: TData[];
+    renderItem: (props: SortableRenderItemProps<TData>) => ReactNode;
+    itemKeyExtractor?: (item: TData, index: number) => string;
+    style?: StyleProp;
+    contentContainerStyle?: StyleProp;
+    testID?: string;
+    /** Accepted and ignored — see `SortableItemPlumbing`. */
+    itemHeight?: number | number[] | ((item: TData, index: number) => number);
+    /** Accepted and ignored. */
+    estimatedItemHeight?: number;
+    /** Accepted and ignored. */
+    enableDynamicHeights?: boolean;
+    /** Accepted and ignored. */
+    useFlatList?: boolean;
+    /** Accepted and ignored. */
+    onHeightsMeasured?: (heights: Record<string, number>) => void;
+    /** `SortableDirection.Horizontal` is not implemented — see
+     *  docs/research/drag-and-drop.md. Passing it throws, rather than
+     *  silently laying out vertically. */
+    direction?: SortableDirection;
+}
+export interface SortableHandleProps {
+    children: ReactNode;
+    style?: StyleProp;
+    testID?: string;
+}
+export interface UseSortableListOptions<TData extends SortableData> {
+    data: TData[];
+    itemKeyExtractor?: (item: TData, index: number) => string;
+    itemHeight?: number | number[] | ((item: TData, index: number) => number);
+    enableDynamicHeights?: boolean;
+    estimatedItemHeight?: number;
+    onHeightsMeasured?: (heights: Record<string, number>) => void;
+}
+export interface UseSortableListReturn<TData extends SortableData> {
+    positions: SharedValueLike<Record<string, number>>;
+    scrollY: SharedValueLike<number>;
+    autoScroll: SharedValueLike<ScrollDirection>;
+    itemHeights: SharedValueLike<Record<string, number>>;
+    dropProviderRef: RefObject<DropProviderRef | null>;
+    handleScroll: () => void;
+    handleScrollEnd: () => void;
+    contentHeight: number;
+    isDynamicHeight: boolean;
+    /** The current order, which this hook owns — upstream keeps the same
+     *  contract ("do NOT update external state in `onMove`"). */
+    items: TData[];
+    getItemProps: (item: TData, index: number) => SortableItemPlumbing;
+}