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

package/dist/dnd/index.js

@@ -20,8 +20,15 @@ export { DropProvider, useDropContext } from "./context";
 export { Draggable, DraggableHandle, useDraggable, } from "./draggable";
 export { Droppable, useDroppable } from "./droppable";
 export { clamp, listToObject, objectMove } from "./order";
-export { Sortable, SortableItem, useSortable, useSortableList, } from "./sortable";
-export { DraggableState, HorizontalScrollDirection, ScrollDirection, SortableDirection, } from "./types";
+export { Sortable, SortableItem, useHorizontalSortable, useHorizontalSortableList, useSortable, useSortableList, } from "./sortable";
+export { SortableGrid, SortableGridItem, useGridSortable, useGridSortableList, } from "./grid";
+// The pure grid arithmetic — worklets upstream, plain functions here, same
+// reasoning as `clamp`/`listToObject`/`objectMove` above. `setGridPosition`/
+// `setGridAutoScroll` are NOT re-exported, for the same reason
+// `setPosition`/`setAutoScroll` are not: both mutate a SharedValue mid-
+// gesture, and there is no gesture on the UI thread here to drive them.
+export { calculateGridContentDimensions, calculateGridPosition, calculateIndexFromRowColumn, findItemIdAtIndex, getGridCellFromCoordinates, listToGridObject, reorderGridInsert, reorderGridSwap, } from "./grid-order";
+export { DraggableState, GridOrientation, GridScrollDirection, GridStrategy, HorizontalScrollDirection, ScrollDirection, SortableDirection, } from "./types";
 // Upstream exports these from `components/sortableUtils`; they are worklet
 // helpers there, plain functions here. `setPosition` and `setAutoScroll`
 // mutate a SharedValue during a UI-thread gesture — there is no gesture on

package/dist/dnd/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dnd/index.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,iBAAiB;AACjB,EAAE;AACF,0EAA0E;AAC1E,uEAAuE;AACvE,6EAA6E;AAC7E,0EAA0E;AAC1E,6EAA6E;AAC7E,2EAA2E;AAC3E,wDAAwD;AACxD,oEAAoE;AACpE,sBAAsB;AACtB,EAAE;AACF,yEAAyE;AACzE,sEAAsE;AACtE,0EAA0E;AAC1E,yEAAyE;AACzE,uEAAuE;AAEvE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAExD,OAAO,EACL,SAAS,EACT,eAAe,EACf,YAAY,GASb,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAErD,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,MAAM,YAAY,CAAA;AAEnB,OAAO,EACL,cAAc,EACd,yBAAyB,EACzB,eAAe,EACf,iBAAiB,GAyBlB,MAAM,SAAS,CAAA;AAEhB,2EAA2E;AAC3E,yEAAyE;AACzE,2EAA2E;AAC3E,sEAAsE;AACtE,sEAAsE;AACtE,sEAAsE","sourcesContent":["// react-native-gtkx/dnd — `react-native-reanimated-dnd`'s API, on GTK's own\n// drag-and-drop.\n//\n// WHY this is a subpath of its own rather than part of `common` or `gtk`.\n// `common` is Adwaita's LOOK written in portable React Native; this is\n// behaviour, and GTK behaviour at that. `gtk` exists on the premise that the\n// import is the signal an app is crossing into Linux-only code — and this\n// module's premise is the exact opposite: the app's import should not change\n// at all, so the specifier has to be ALIASABLE. `react-native-gtkx/svg` is\n// the precedent, and the Metro and Vite presets rewrite\n// `react-native-reanimated-dnd` onto this the same way they rewrite\n// `react-native-svg`.\n//\n// The library itself cannot run here: Reanimated 4, worklets and RNGH at\n// module scope in twelve of its files, with the sort algorithm inside\n// `useAnimatedReaction` and the row layout inside `useAnimatedStyle`. The\n// evidence, and the prop-by-prop account of what this mirror honours and\n// what it deliberately does not, is in docs/research/drag-and-drop.md.\n\nexport { DropProvider, useDropContext } from \"./context\"\n\nexport {\n  Draggable,\n  DraggableHandle,\n  useDraggable,\n  // What `useDraggable` actually returns. `UseDraggableReturn` below is the\n  // mirrored half (upstream's field names); this adds the two fields a\n  // caller rendering its own view cannot do without — the measurable ref and\n  // the drag source itself. Unexported, the hook's own documented use case\n  // (\"for a component that owns its own view\") could not be typed by the\n  // component that owns it; porting upstream's `CustomDraggable` is what\n  // found that.\n  type UseDraggableResult,\n} from \"./draggable\"\n\nexport { Droppable, useDroppable } from \"./droppable\"\n\nexport { clamp, listToObject, objectMove } from \"./order\"\n\nexport {\n  Sortable,\n  SortableItem,\n  useSortable,\n  useSortableList,\n} from \"./sortable\"\n\nexport {\n  DraggableState,\n  HorizontalScrollDirection,\n  ScrollDirection,\n  SortableDirection,\n  type AnimationFunction,\n  type CollisionAlgorithm,\n  type DraggableHandleProps,\n  type DraggableProps,\n  type DropAlignment,\n  type DroppableProps,\n  type DroppedItemsMap,\n  type DropOffset,\n  type DropProviderProps,\n  type DropProviderRef,\n  type SharedValueLike,\n  type SortableData,\n  type SortableHandleProps,\n  type SortableItemProps,\n  type SortableProps,\n  type SortableRenderItemProps,\n  type UseDraggableOptions,\n  type UseDraggableReturn,\n  type UseDroppableOptions,\n  type UseDroppableReturn,\n  type UseSortableListOptions,\n  type UseSortableListReturn,\n  type UseSortableOptions,\n  type UseSortableReturn,\n} from \"./types\"\n\n// Upstream exports these from `components/sortableUtils`; they are worklet\n// helpers there, plain functions here. `setPosition` and `setAutoScroll`\n// mutate a SharedValue during a UI-thread gesture — there is no gesture on\n// the UI thread here, so they would have nothing to drive and are NOT\n// re-exported. An app that imported them was reaching into upstream's\n// internals; the build failing at that import is the correct outcome.\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dnd/index.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,iBAAiB;AACjB,EAAE;AACF,0EAA0E;AAC1E,uEAAuE;AACvE,6EAA6E;AAC7E,0EAA0E;AAC1E,6EAA6E;AAC7E,2EAA2E;AAC3E,wDAAwD;AACxD,oEAAoE;AACpE,sBAAsB;AACtB,EAAE;AACF,yEAAyE;AACzE,sEAAsE;AACtE,0EAA0E;AAC1E,yEAAyE;AACzE,uEAAuE;AAEvE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAExD,OAAO,EACL,SAAS,EACT,eAAe,EACf,YAAY,GASb,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAErD,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,qBAAqB,EACrB,yBAAyB,EACzB,WAAW,EACX,eAAe,GAChB,MAAM,YAAY,CAAA;AAEnB,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,MAAM,QAAQ,CAAA;AAEf,2EAA2E;AAC3E,6EAA6E;AAC7E,+DAA+D;AAC/D,wEAAwE;AACxE,wEAAwE;AACxE,OAAO,EACL,8BAA8B,EAC9B,qBAAqB,EACrB,2BAA2B,EAC3B,iBAAiB,EACjB,0BAA0B,EAC1B,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,GAChB,MAAM,cAAc,CAAA;AAErB,OAAO,EACL,cAAc,EACd,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,EACzB,eAAe,EACf,iBAAiB,GAyClB,MAAM,SAAS,CAAA;AAEhB,2EAA2E;AAC3E,yEAAyE;AACzE,2EAA2E;AAC3E,sEAAsE;AACtE,sEAAsE;AACtE,sEAAsE","sourcesContent":["// react-native-gtkx/dnd — `react-native-reanimated-dnd`'s API, on GTK's own\n// drag-and-drop.\n//\n// WHY this is a subpath of its own rather than part of `common` or `gtk`.\n// `common` is Adwaita's LOOK written in portable React Native; this is\n// behaviour, and GTK behaviour at that. `gtk` exists on the premise that the\n// import is the signal an app is crossing into Linux-only code — and this\n// module's premise is the exact opposite: the app's import should not change\n// at all, so the specifier has to be ALIASABLE. `react-native-gtkx/svg` is\n// the precedent, and the Metro and Vite presets rewrite\n// `react-native-reanimated-dnd` onto this the same way they rewrite\n// `react-native-svg`.\n//\n// The library itself cannot run here: Reanimated 4, worklets and RNGH at\n// module scope in twelve of its files, with the sort algorithm inside\n// `useAnimatedReaction` and the row layout inside `useAnimatedStyle`. The\n// evidence, and the prop-by-prop account of what this mirror honours and\n// what it deliberately does not, is in docs/research/drag-and-drop.md.\n\nexport { DropProvider, useDropContext } from \"./context\"\n\nexport {\n  Draggable,\n  DraggableHandle,\n  useDraggable,\n  // What `useDraggable` actually returns. `UseDraggableReturn` below is the\n  // mirrored half (upstream's field names); this adds the two fields a\n  // caller rendering its own view cannot do without — the measurable ref and\n  // the drag source itself. Unexported, the hook's own documented use case\n  // (\"for a component that owns its own view\") could not be typed by the\n  // component that owns it; porting upstream's `CustomDraggable` is what\n  // found that.\n  type UseDraggableResult,\n} from \"./draggable\"\n\nexport { Droppable, useDroppable } from \"./droppable\"\n\nexport { clamp, listToObject, objectMove } from \"./order\"\n\nexport {\n  Sortable,\n  SortableItem,\n  useHorizontalSortable,\n  useHorizontalSortableList,\n  useSortable,\n  useSortableList,\n} from \"./sortable\"\n\nexport {\n  SortableGrid,\n  SortableGridItem,\n  useGridSortable,\n  useGridSortableList,\n} from \"./grid\"\n\n// The pure grid arithmetic — worklets upstream, plain functions here, same\n// reasoning as `clamp`/`listToObject`/`objectMove` above. `setGridPosition`/\n// `setGridAutoScroll` are NOT re-exported, for the same reason\n// `setPosition`/`setAutoScroll` are not: both mutate a SharedValue mid-\n// gesture, and there is no gesture on the UI thread here to drive them.\nexport {\n  calculateGridContentDimensions,\n  calculateGridPosition,\n  calculateIndexFromRowColumn,\n  findItemIdAtIndex,\n  getGridCellFromCoordinates,\n  listToGridObject,\n  reorderGridInsert,\n  reorderGridSwap,\n} from \"./grid-order\"\n\nexport {\n  DraggableState,\n  GridOrientation,\n  GridScrollDirection,\n  GridStrategy,\n  HorizontalScrollDirection,\n  ScrollDirection,\n  SortableDirection,\n  type AnimationFunction,\n  type CollisionAlgorithm,\n  type DraggableHandleProps,\n  type DraggableProps,\n  type DropAlignment,\n  type DroppableProps,\n  type DroppedItemsMap,\n  type DropOffset,\n  type DropProviderProps,\n  type DropProviderRef,\n  type GridCallbacks,\n  type GridDimensions,\n  type GridItemPlumbing,\n  type GridPosition,\n  type GridPositions,\n  type SharedValueLike,\n  type SortableData,\n  type SortableGridItemProps,\n  type SortableGridProps,\n  type SortableGridRenderItemProps,\n  type SortableHandleProps,\n  type SortableItemProps,\n  type SortableProps,\n  type SortableRenderItemProps,\n  type UseDraggableOptions,\n  type UseDraggableReturn,\n  type UseDroppableOptions,\n  type UseDroppableReturn,\n  type UseGridSortableListOptions,\n  type UseGridSortableListReturn,\n  type UseGridSortableOptions,\n  type UseGridSortableReturn,\n  type UseHorizontalSortableListOptions,\n  type UseHorizontalSortableListReturn,\n  type UseHorizontalSortableOptions,\n  type UseHorizontalSortableReturn,\n  type UseSortableListOptions,\n  type UseSortableListReturn,\n  type UseSortableOptions,\n  type UseSortableReturn,\n} from \"./types\"\n\n// Upstream exports these from `components/sortableUtils`; they are worklet\n// helpers there, plain functions here. `setPosition` and `setAutoScroll`\n// mutate a SharedValue during a UI-thread gesture — there is no gesture on\n// the UI thread here, so they would have nothing to drive and are NOT\n// re-exported. An app that imported them was reaching into upstream's\n// internals; the build failing at that import is the correct outcome.\n"]}

package/dist/dnd/order-state.d.ts

@@ -0,0 +1,14 @@
+import { type Dispatch, type SetStateAction } from "react";
+import type { SortableData } from "./types";
+export declare const keyOf: <TData extends SortableData>(item: TData, index: number, extractor?: (item: TData, index: number) => string) => string;
+export type OrderState<TData> = {
+    /** Namespaces this list's payloads, so dragging a row does not light up
+     *  every `Droppable` on the screen. */
+    scope: string;
+    order: string[];
+    setOrder: Dispatch<SetStateAction<string[]>>;
+    items: TData[];
+};
+/** The order state, shared by every `use*SortableList` hook and every list
+ *  component (`Sortable`, `SortableGrid`) in this module. */
+export declare const useOrder: <TData extends SortableData>(data: TData[], itemKeyExtractor?: (item: TData, index: number) => string) => OrderState<TData>;

package/dist/dnd/order-state.js

@@ -0,0 +1,55 @@
+// The order-owning state shared by every list shape in this module: the
+// plain vertical `Sortable`, the horizontal direction of the same component,
+// and `SortableGrid`. All three keep the SAME representation — an ARRAY of
+// ids, index 0..N-1 — because that is what upstream's own `listToObject` /
+// `listToGridObject` build from a list on mount, and reducing every reorder
+// back to "produce a new array in this order" is what lets one hook serve
+// a row, a column and a grid cell alike (a grid's `GridPositions` is just
+// this array run through `calculateGridPosition`; see grid-order.ts).
+import { useMemo, useState } from "react";
+import { nextDraggableId } from "./payload";
+export const keyOf = (item, index, extractor) => extractor?.(item, index) ?? item.id;
+/** The order state, shared by every `use*SortableList` hook and every list
+ *  component (`Sortable`, `SortableGrid`) in this module. */
+export 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 };
+};
+//# sourceMappingURL=order-state.js.map

package/dist/dnd/order-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-state.js","sourceRoot":"","sources":["../../src/dnd/order-state.ts"],"names":[],"mappings":"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","sourcesContent":["// The order-owning state shared by every list shape in this module: the\n// plain vertical `Sortable`, the horizontal direction of the same component,\n// and `SortableGrid`. All three keep the SAME representation — an ARRAY of\n// ids, index 0..N-1 — because that is what upstream's own `listToObject` /\n// `listToGridObject` build from a list on mount, and reducing every reorder\n// back to \"produce a new array in this order\" is what lets one hook serve\n// a row, a column and a grid cell alike (a grid's `GridPositions` is just\n// this array run through `calculateGridPosition`; see grid-order.ts).\nimport { useMemo, useState, type Dispatch, type SetStateAction } from \"react\"\nimport { nextDraggableId } from \"./payload\"\nimport type { SortableData } from \"./types\"\n\nexport const 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\nexport type OrderState<TData> = {\n  /** Namespaces this list's payloads, so dragging a row does not light up\n   *  every `Droppable` on the screen. */\n  scope: string\n  order: string[]\n  setOrder: Dispatch<SetStateAction<string[]>>\n  items: TData[]\n}\n\n/** The order state, shared by every `use*SortableList` hook and every list\n *  component (`Sortable`, `SortableGrid`) in this module. */\nexport const useOrder = <TData extends SortableData>(\n  data: TData[],\n  itemKeyExtractor?: (item: TData, index: number) => string,\n): OrderState<TData> => {\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"]}

package/dist/dnd/order.d.ts

@@ -5,3 +5,22 @@ export declare const listToObject: (items: readonly (string | SortableData)[]) =
 /** Moves the entry at `from` to `to`, returning a new position map. */
 export declare const objectMove: (positions: Record<string, number>, from: number, to: number) => Record<string, number>;
 export declare const clamp: (value: number, lower: number, upper: number) => number;
+/**
+ * Resolves a TRACKED row position (`sortable.tsx`'s `useSortable`: the row's
+ * own top/left edge, `fromIndex * slotSize` plus the pointer's delta since
+ * the drag began — never a measured layout, same as upstream's own
+ * `positionY.value`) onto the nearest slot index.
+ *
+ * ROUNDS rather than floors. Upstream's `setPosition` floors this exact
+ * quantity (`Math.floor(positionY / itemHeight)`), which resolves by the
+ * row's TOP-LEFT corner against the slot's origin: crossing away from index
+ * 0 needs the row's own full `itemHeight` of travel, crossing toward it needs
+ * about one pixel (`docs/research/dnd-collision-feel.md`). Rounding instead
+ * is mathematically the same as resolving by the row's own CENTRE against
+ * each slot's centre — `Math.round(top / slotSize)` is exactly
+ * `Math.floor((top + slotSize / 2) / slotSize)` — so both directions need
+ * about half a slot, symmetric, and independent of `slotSize`'s value (a
+ * gap folded into it does not change the symmetry, only the threshold's
+ * size).
+ */
+export declare const resolveTrackedIndex: (trackedPosition: number, slotSize: number, itemsCount: number) => number;

package/dist/dnd/order.js

@@ -17,4 +17,23 @@ export const objectMove = (positions, from, to) => {
     return listToObject(ids);
 };
 export const clamp = (value, lower, upper) => Math.min(Math.max(value, lower), upper);
+/**
+ * Resolves a TRACKED row position (`sortable.tsx`'s `useSortable`: the row's
+ * own top/left edge, `fromIndex * slotSize` plus the pointer's delta since
+ * the drag began — never a measured layout, same as upstream's own
+ * `positionY.value`) onto the nearest slot index.
+ *
+ * ROUNDS rather than floors. Upstream's `setPosition` floors this exact
+ * quantity (`Math.floor(positionY / itemHeight)`), which resolves by the
+ * row's TOP-LEFT corner against the slot's origin: crossing away from index
+ * 0 needs the row's own full `itemHeight` of travel, crossing toward it needs
+ * about one pixel (`docs/research/dnd-collision-feel.md`). Rounding instead
+ * is mathematically the same as resolving by the row's own CENTRE against
+ * each slot's centre — `Math.round(top / slotSize)` is exactly
+ * `Math.floor((top + slotSize / 2) / slotSize)` — so both directions need
+ * about half a slot, symmetric, and independent of `slotSize`'s value (a
+ * gap folded into it does not change the symmetry, only the threshold's
+ * size).
+ */
+export const resolveTrackedIndex = (trackedPosition, slotSize, itemsCount) => clamp(Math.round(trackedPosition / slotSize), 0, itemsCount - 1);
 //# sourceMappingURL=order.js.map

package/dist/dnd/order.js.map

@@ -1 +1 @@
-{"version":3,"file":"order.js","sourceRoot":"","sources":["../../src/dnd/order.ts"],"names":[],"mappings":"AASA;+DAC+D;AAC/D,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,KAAyC,EACjB,EAAE;IAC1B,MAAM,MAAM,GAA2B,EAAE,CAAA;IACzC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC5B,MAAM,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,KAAK,CAAA;IAC3D,CAAC,CAAC,CAAA;IACF,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAED,uEAAuE;AACvE,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,SAAiC,EACjC,IAAY,EACZ,EAAU,EACc,EAAE;IAC1B,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CACrC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CACpD,CAAA;IACD,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;IACnC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,CAAA;IAC1B,CAAC;IACD,OAAO,YAAY,CAAC,GAAG,CAAC,CAAA;AAC1B,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,KAAa,EAAE,KAAa,EAAU,EAAE,CAC3E,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,KAAK,CAAC,CAAA","sourcesContent":["// The order arithmetic, kept free of every GTK import.\n//\n// Upstream's equivalents live in `components/sortableUtils` and are worklets;\n// here they are plain functions, and they are in their own module so the unit\n// test project — which has no GTK runtime — can import them. `sortable.tsx`\n// re-exports them, so an app still imports them from the subpath root exactly\n// as it does upstream.\nimport type { SortableData } from \"./types\"\n\n/** `[\"a\", \"b\"]` → `{ a: 0, b: 1 }`. Upstream's takes objects with an `id`;\n *  both shapes are accepted so no call site has to convert. */\nexport const listToObject = (\n  items: readonly (string | SortableData)[],\n): Record<string, number> => {\n  const result: Record<string, number> = {}\n  items.forEach((item, index) => {\n    result[typeof item === \"string\" ? item : item.id] = index\n  })\n  return result\n}\n\n/** Moves the entry at `from` to `to`, returning a new position map. */\nexport const objectMove = (\n  positions: Record<string, number>,\n  from: number,\n  to: number,\n): Record<string, number> => {\n  const ids = Object.keys(positions).sort(\n    (a, b) => (positions[a] ?? 0) - (positions[b] ?? 0),\n  )\n  const [moved] = ids.splice(from, 1)\n  if (moved !== undefined) {\n    ids.splice(to, 0, moved)\n  }\n  return listToObject(ids)\n}\n\nexport const clamp = (value: number, lower: number, upper: number): number =>\n  Math.min(Math.max(value, lower), upper)\n"]}
+{"version":3,"file":"order.js","sourceRoot":"","sources":["../../src/dnd/order.ts"],"names":[],"mappings":"AASA;+DAC+D;AAC/D,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,KAAyC,EACjB,EAAE;IAC1B,MAAM,MAAM,GAA2B,EAAE,CAAA;IACzC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC5B,MAAM,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,KAAK,CAAA;IAC3D,CAAC,CAAC,CAAA;IACF,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAED,uEAAuE;AACvE,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,SAAiC,EACjC,IAAY,EACZ,EAAU,EACc,EAAE;IAC1B,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CACrC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CACpD,CAAA;IACD,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;IACnC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,CAAA;IAC1B,CAAC;IACD,OAAO,YAAY,CAAC,GAAG,CAAC,CAAA;AAC1B,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,KAAa,EAAE,KAAa,EAAU,EAAE,CAC3E,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,KAAK,CAAC,CAAA;AAEzC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,eAAuB,EACvB,QAAgB,EAChB,UAAkB,EACV,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,CAAC,EAAE,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,CAAA","sourcesContent":["// The order arithmetic, kept free of every GTK import.\n//\n// Upstream's equivalents live in `components/sortableUtils` and are worklets;\n// here they are plain functions, and they are in their own module so the unit\n// test project — which has no GTK runtime — can import them. `sortable.tsx`\n// re-exports them, so an app still imports them from the subpath root exactly\n// as it does upstream.\nimport type { SortableData } from \"./types\"\n\n/** `[\"a\", \"b\"]` → `{ a: 0, b: 1 }`. Upstream's takes objects with an `id`;\n *  both shapes are accepted so no call site has to convert. */\nexport const listToObject = (\n  items: readonly (string | SortableData)[],\n): Record<string, number> => {\n  const result: Record<string, number> = {}\n  items.forEach((item, index) => {\n    result[typeof item === \"string\" ? item : item.id] = index\n  })\n  return result\n}\n\n/** Moves the entry at `from` to `to`, returning a new position map. */\nexport const objectMove = (\n  positions: Record<string, number>,\n  from: number,\n  to: number,\n): Record<string, number> => {\n  const ids = Object.keys(positions).sort(\n    (a, b) => (positions[a] ?? 0) - (positions[b] ?? 0),\n  )\n  const [moved] = ids.splice(from, 1)\n  if (moved !== undefined) {\n    ids.splice(to, 0, moved)\n  }\n  return listToObject(ids)\n}\n\nexport const clamp = (value: number, lower: number, upper: number): number =>\n  Math.min(Math.max(value, lower), upper)\n\n/**\n * Resolves a TRACKED row position (`sortable.tsx`'s `useSortable`: the row's\n * own top/left edge, `fromIndex * slotSize` plus the pointer's delta since\n * the drag began — never a measured layout, same as upstream's own\n * `positionY.value`) onto the nearest slot index.\n *\n * ROUNDS rather than floors. Upstream's `setPosition` floors this exact\n * quantity (`Math.floor(positionY / itemHeight)`), which resolves by the\n * row's TOP-LEFT corner against the slot's origin: crossing away from index\n * 0 needs the row's own full `itemHeight` of travel, crossing toward it needs\n * about one pixel (`docs/research/dnd-collision-feel.md`). Rounding instead\n * is mathematically the same as resolving by the row's own CENTRE against\n * each slot's centre — `Math.round(top / slotSize)` is exactly\n * `Math.floor((top + slotSize / 2) / slotSize)` — so both directions need\n * about half a slot, symmetric, and independent of `slotSize`'s value (a\n * gap folded into it does not change the symmetry, only the threshold's\n * size).\n */\nexport const resolveTrackedIndex = (\n  trackedPosition: number,\n  slotSize: number,\n  itemsCount: number,\n): number => clamp(Math.round(trackedPosition / slotSize), 0, itemsCount - 1)\n"]}

package/dist/dnd/sortable.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type SortableData, type SortableItemProps, type SortableProps, type UseSortableListOptions, type UseSortableListReturn, type UseSortableOptions, type UseSortableReturn } from "./types";
+import { type SortableData, type SortableItemProps, type SortableProps, type UseHorizontalSortableListOptions, type UseHorizontalSortableListReturn, type UseHorizontalSortableOptions, type UseHorizontalSortableReturn, type UseSortableListOptions, type UseSortableListReturn, type UseSortableOptions, type UseSortableReturn } from "./types";
 export { clamp, listToObject, objectMove } from "./order";
 /**
  * Owns the order of a sortable list, for an app rendering its own container.
@@ -10,8 +10,18 @@ export { clamp, listToObject, objectMove } from "./order";
  * `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.
+ *
+ * No autoscroll wiring: this hook builds no `ScrollView` of its own to drive
+ * one, hence the no-op `handleScroll`/`handleScrollEnd` below, unchanged from
+ * before. `Sortable` is where the edge autoscroll in `autoscroll.tsx` lives.
  */
 export declare const useSortableList: <TData extends SortableData>(options: UseSortableListOptions<TData>) => UseSortableListReturn<TData>;
+/**
+ * The horizontal counterpart of {@link useSortableList} — its own hook
+ * upstream, so its own hook here, even though the order state underneath
+ * (`order-state.ts`) is identical.
+ */
+export declare const useHorizontalSortableList: <TData extends SortableData>(options: UseHorizontalSortableListOptions<TData>) => UseHorizontalSortableListReturn<TData>;
 /**
  * A list whose rows reorder by dragging.
  *
@@ -34,16 +44,31 @@ export declare const useSortableList: <TData extends SortableData>(options: UseS
  *
  * 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.
+ * Near either end of the visible list, the drag keeps the `ScrollView`
+ * scrolling toward it for as long as it stays there (`autoscroll.tsx`).
  */
-export declare const Sortable: <TData extends SortableData>({ data, renderItem, itemKeyExtractor, style, contentContainerStyle, testID, direction, onMove, onDragStart, onDrop, onDragging, }: SortableProps<TData>) => ReactNode;
+export declare const Sortable: <TData extends SortableData>({ data, renderItem, itemKeyExtractor, style, contentContainerStyle, testID, direction, itemWidth, gap, paddingHorizontal, onMove, onDragStart, onDrop, onDragging, onDraggingHorizontal, }: SortableProps<TData>) => ReactNode;
 /**
  * The reorder half of the module, as a hook, for a row that owns its own
- * view. Render `children` inside that view.
+ * view.
+ *
+ * Shared by both directions: which coordinate reaches `onDragging`/
+ * `onDraggingHorizontal` (and which of the two fires at all) comes from the
+ * enclosing `Sortable`'s own `direction`, read through context — the reorder
+ * itself (cross into another cell's drop target) never looks at an axis.
  */
 export declare const useSortable: <TData>(options: UseSortableOptions<TData>) => UseSortableReturn;
+/**
+ * The horizontal counterpart of {@link useSortable} — upstream's own separate
+ * hook, kept separate here too, though it is the same implementation under a
+ * shape matching `UseHorizontalSortableOptions`. Must be inside a
+ * `<Sortable direction="horizontal">`, same as `useSortable` must be inside a
+ * `Sortable`.
+ */
+export declare const useHorizontalSortable: <TData>(options: UseHorizontalSortableOptions<TData>) => UseHorizontalSortableReturn;
 /** 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 declare const SortableItem: {
-    <TData>({ id, data, children, style, animatedStyle, testID, onMove, onDragStart, onDrop, onDragging, }: SortableItemProps<TData>): ReactNode;
+    <TData>({ id, data, children, style, animatedStyle, testID, onMove, onDragStart, onDrop, onDragging, onDraggingHorizontal, }: SortableItemProps<TData>): ReactNode;
     Handle: ({ children, style, testID, }: import("./types").DraggableHandleProps) => ReactNode;
 };