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

package/dist/contracts.d.ts

@@ -115,9 +115,13 @@ export type VisualStyle = Partial<{
 export type PointerEventsValue = "auto" | "none" | "box-none" | "box-only";
 export type BehavioralStyle = Partial<{
     pointerEvents: PointerEventsValue;
+    zIndex: number;
 }>;
 export type FlatStyle = LayoutStyle & VisualStyle & BehavioralStyle;
 export type StyleProp<T = FlatStyle> = T | null | undefined | false | ReadonlyArray<StyleProp<T>>;
+export type ViewStyle = FlatStyle;
+export type TextStyle = FlatStyle;
+export type ImageStyle = FlatStyle;
 export type SplitStyle = {
     layout: LayoutStyle;
     visual: VisualStyle;

package/dist/contracts.js.map

@@ -1 +1 @@
-{"version":3,"file":"contracts.js","sourceRoot":"","sources":["../src/contracts.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,sEAAsE","sourcesContent":["// Shared contracts between the layout engine, the style system, the API\n// modules and the components — the one module every layer may import.\n\n// --- style ------------------------------------------------------------------\n\nexport type DimensionValue = number | `${number}%` | \"auto\"\n\nexport type FlexAlignType =\n  \"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"baseline\"\n\n// Layout-affecting props: classified by the style system, consumed by the\n// layout engine, which maps them onto Yoga node setters.\nexport type LayoutStyle = Partial<{\n  alignContent:\n    | \"flex-start\"\n    | \"flex-end\"\n    | \"center\"\n    | \"stretch\"\n    | \"space-between\"\n    | \"space-around\"\n  alignItems: FlexAlignType\n  alignSelf: \"auto\" | FlexAlignType\n  aspectRatio: number | string\n  bottom: DimensionValue\n  columnGap: number\n  direction: \"inherit\" | \"ltr\" | \"rtl\"\n  display: \"none\" | \"flex\"\n  flex: number\n  flexBasis: DimensionValue\n  flexDirection: \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\"\n  flexGrow: number\n  flexShrink: number\n  flexWrap: \"wrap\" | \"nowrap\" | \"wrap-reverse\"\n  gap: number\n  height: DimensionValue\n  justifyContent:\n    | \"flex-start\"\n    | \"flex-end\"\n    | \"center\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\"\n  left: DimensionValue\n  margin: DimensionValue\n  marginBottom: DimensionValue\n  marginHorizontal: DimensionValue\n  marginLeft: DimensionValue\n  marginRight: DimensionValue\n  marginTop: DimensionValue\n  marginVertical: DimensionValue\n  maxHeight: DimensionValue\n  maxWidth: DimensionValue\n  minHeight: DimensionValue\n  minWidth: DimensionValue\n  overflow: \"visible\" | \"hidden\" | \"scroll\"\n  padding: DimensionValue\n  paddingBottom: DimensionValue\n  paddingHorizontal: DimensionValue\n  paddingLeft: DimensionValue\n  paddingRight: DimensionValue\n  paddingTop: DimensionValue\n  paddingVertical: DimensionValue\n  position: \"absolute\" | \"relative\" | \"static\"\n  right: DimensionValue\n  rowGap: number\n  top: DimensionValue\n  width: DimensionValue\n}>\n\nexport type Angle = `${number}deg` | `${number}rad`\n\nexport type TransformPart =\n  | { translateX: number }\n  | { translateY: number }\n  | { scale: number }\n  | { scaleX: number }\n  | { scaleY: number }\n  | { rotate: Angle }\n  // RN's 2D alias for `rotate` (rotation about the Z axis).\n  | { rotateZ: Angle }\n\n// A 2D affine transform in the component order GSK and cairo use:\n//   x' = xx * x + xy * y + dx\n//   y' = yx * x + yy * y + dy\n// This is exactly the argument order of gsk_transform_matrix2d(), so a\n// composed TransformPart[] reaches GTK in a single FFI call.\nexport type Transform2D = {\n  xx: number\n  yx: number\n  xy: number\n  yy: number\n  dx: number\n  dy: number\n}\n\n// Visual props: classified by the style system, compiled into GTK CSS\n// classes via the bridge `css` helper. Text-specific props apply to <Text>.\n// One shadow of a `boxShadow`, field for field react-native's own\n// `BoxShadowValue` (RN 0.76+). Lengths are RN DIPs when numeric; the string\n// form accepts a bare number or `px` and nothing else, which is exactly what\n// RN's processBoxShadow.js accepts.\nexport type BoxShadowValue = {\n  offsetX: number | string\n  offsetY: number | string\n  color?: string\n  blurRadius?: number | string\n  spreadDistance?: number | string\n  inset?: boolean\n}\n\nexport type TextDecorationLine =\n  \"none\" | \"underline\" | \"line-through\" | \"underline line-through\"\n\nexport type VisualStyle = Partial<{\n  backgroundColor: string\n  // RN 0.76+. Both forms RN takes: a CSS `box-shadow` string or the\n  // structured array. Compiled by style/box-shadow.ts rather than forwarded,\n  // so colours go through the same normalizer as every other colour prop.\n  boxShadow: string | readonly BoxShadowValue[]\n  borderBottomColor: string\n  borderBottomLeftRadius: number\n  borderBottomRightRadius: number\n  borderBottomWidth: number\n  borderColor: string\n  borderLeftColor: string\n  borderLeftWidth: number\n  borderRadius: number\n  borderRightColor: string\n  borderRightWidth: number\n  borderStyle: \"solid\" | \"dotted\" | \"dashed\"\n  borderTopColor: string\n  borderTopLeftRadius: number\n  borderTopRightRadius: number\n  borderTopWidth: number\n  borderWidth: number\n  color: string\n  fontFamily: string\n  fontSize: number\n  fontStyle: \"normal\" | \"italic\"\n  fontWeight:\n    | \"normal\"\n    | \"bold\"\n    | \"100\"\n    | \"200\"\n    | \"300\"\n    | \"400\"\n    | \"500\"\n    | \"600\"\n    | \"700\"\n    | \"800\"\n    | \"900\"\n  letterSpacing: number\n  lineHeight: number\n  opacity: number\n  // RN 0.77+. A ring drawn around the border box that takes no layout space\n  // — CSS `outline`, which GTK4 implements natively and Adwaita itself uses\n  // for every focus ring in the theme.\n  outlineColor: string\n  outlineOffset: number\n  outlineStyle: \"solid\" | \"dotted\" | \"dashed\"\n  outlineWidth: number\n  // NOT emitted to CSS (no such GTK CSS property): the Text component applies\n  // it via label props using the pure style/text-align helper.\n  textAlign: \"auto\" | \"left\" | \"right\" | \"center\" | \"justify\"\n  // NOT emitted to CSS either — GTK4 CSS has no widget `text-decoration`.\n  // Pango carries it, so the Text component turns it into the label's\n  // attribute list using the pure style/text-decoration helper.\n  textDecorationLine: TextDecorationLine\n  // NOT emitted to CSS (GTK4 has no widget `transform` property): composed\n  // into a Transform2D by style/transform.ts and applied as the GskTransform\n  // of the child's allocation by the container's layout manager.\n  transform: TransformPart[]\n}>\n\n// RN pointerEvents (also allowed in styles since RN 0.71); behavioral, so\n// it belongs to neither the layout nor the visual bucket — splitStyle\n// consumes it without routing it and View reads it from the flattened style.\nexport type PointerEventsValue = \"auto\" | \"none\" | \"box-none\" | \"box-only\"\n\n// The third bucket, named rather than inlined into FlatStyle below: props\n// that are supported but consumed by the component that owns the behavior,\n// not by either half of the style pipeline. Having a name for it is what\n// lets splitStyle state which keys it deliberately routes nowhere, instead\n// of reporting them as unknown — the drift this type was born from.\nexport type BehavioralStyle = Partial<{\n  pointerEvents: PointerEventsValue\n}>\n\nexport type FlatStyle = LayoutStyle & VisualStyle & BehavioralStyle\n\n// Style prop as components accept it: single object, array (with falsy holes).\nexport type StyleProp<T = FlatStyle> =\n  T | null | undefined | false | ReadonlyArray<StyleProp<T>>\n\n// Result of classifying a flattened style (produced by the style system):\nexport type SplitStyle = {\n  layout: LayoutStyle\n  visual: VisualStyle\n}\n\n// --- layout engine ----------------------------------------------------------\n\nexport type Rect = {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n\nexport type MeasureConstraintMode = \"undefined\" | \"exactly\" | \"at-most\"\n\nexport type MeasureSize = { width: number; height: number }\n\n// Measure callback for leaf nodes (text, images): implemented by components\n// using bridge probes; called by the engine during Yoga layout passes.\nexport type MeasureFn = (\n  width: number,\n  widthMode: MeasureConstraintMode,\n  height: number,\n  heightMode: MeasureConstraintMode,\n) => MeasureSize\n\n// Handle the layout engine gives every mounted component.\nexport interface LayoutNodeApi {\n  setStyle(style: LayoutStyle): void\n  setMeasureFn(measure: MeasureFn | null): void\n  markDirty(): void\n  getRect(): Rect | null\n  setOnLayout(callback: ((rect: Rect) => void) | null): void\n}\n\n// --- subscriptions ----------------------------------------------------------\n\nexport type SubscriptionHandle = { remove(): void }\n"]}
+{"version":3,"file":"contracts.js","sourceRoot":"","sources":["../src/contracts.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,sEAAsE","sourcesContent":["// Shared contracts between the layout engine, the style system, the API\n// modules and the components — the one module every layer may import.\n\n// --- style ------------------------------------------------------------------\n\nexport type DimensionValue = number | `${number}%` | \"auto\"\n\nexport type FlexAlignType =\n  \"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"baseline\"\n\n// Layout-affecting props: classified by the style system, consumed by the\n// layout engine, which maps them onto Yoga node setters.\nexport type LayoutStyle = Partial<{\n  alignContent:\n    | \"flex-start\"\n    | \"flex-end\"\n    | \"center\"\n    | \"stretch\"\n    | \"space-between\"\n    | \"space-around\"\n  alignItems: FlexAlignType\n  alignSelf: \"auto\" | FlexAlignType\n  aspectRatio: number | string\n  bottom: DimensionValue\n  columnGap: number\n  direction: \"inherit\" | \"ltr\" | \"rtl\"\n  display: \"none\" | \"flex\"\n  flex: number\n  flexBasis: DimensionValue\n  flexDirection: \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\"\n  flexGrow: number\n  flexShrink: number\n  flexWrap: \"wrap\" | \"nowrap\" | \"wrap-reverse\"\n  gap: number\n  height: DimensionValue\n  justifyContent:\n    | \"flex-start\"\n    | \"flex-end\"\n    | \"center\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\"\n  left: DimensionValue\n  margin: DimensionValue\n  marginBottom: DimensionValue\n  marginHorizontal: DimensionValue\n  marginLeft: DimensionValue\n  marginRight: DimensionValue\n  marginTop: DimensionValue\n  marginVertical: DimensionValue\n  maxHeight: DimensionValue\n  maxWidth: DimensionValue\n  minHeight: DimensionValue\n  minWidth: DimensionValue\n  overflow: \"visible\" | \"hidden\" | \"scroll\"\n  padding: DimensionValue\n  paddingBottom: DimensionValue\n  paddingHorizontal: DimensionValue\n  paddingLeft: DimensionValue\n  paddingRight: DimensionValue\n  paddingTop: DimensionValue\n  paddingVertical: DimensionValue\n  position: \"absolute\" | \"relative\" | \"static\"\n  right: DimensionValue\n  rowGap: number\n  top: DimensionValue\n  width: DimensionValue\n}>\n\nexport type Angle = `${number}deg` | `${number}rad`\n\nexport type TransformPart =\n  | { translateX: number }\n  | { translateY: number }\n  | { scale: number }\n  | { scaleX: number }\n  | { scaleY: number }\n  | { rotate: Angle }\n  // RN's 2D alias for `rotate` (rotation about the Z axis).\n  | { rotateZ: Angle }\n\n// A 2D affine transform in the component order GSK and cairo use:\n//   x' = xx * x + xy * y + dx\n//   y' = yx * x + yy * y + dy\n// This is exactly the argument order of gsk_transform_matrix2d(), so a\n// composed TransformPart[] reaches GTK in a single FFI call.\nexport type Transform2D = {\n  xx: number\n  yx: number\n  xy: number\n  yy: number\n  dx: number\n  dy: number\n}\n\n// Visual props: classified by the style system, compiled into GTK CSS\n// classes via the bridge `css` helper. Text-specific props apply to <Text>.\n// One shadow of a `boxShadow`, field for field react-native's own\n// `BoxShadowValue` (RN 0.76+). Lengths are RN DIPs when numeric; the string\n// form accepts a bare number or `px` and nothing else, which is exactly what\n// RN's processBoxShadow.js accepts.\nexport type BoxShadowValue = {\n  offsetX: number | string\n  offsetY: number | string\n  color?: string\n  blurRadius?: number | string\n  spreadDistance?: number | string\n  inset?: boolean\n}\n\nexport type TextDecorationLine =\n  \"none\" | \"underline\" | \"line-through\" | \"underline line-through\"\n\nexport type VisualStyle = Partial<{\n  backgroundColor: string\n  // RN 0.76+. Both forms RN takes: a CSS `box-shadow` string or the\n  // structured array. Compiled by style/box-shadow.ts rather than forwarded,\n  // so colours go through the same normalizer as every other colour prop.\n  boxShadow: string | readonly BoxShadowValue[]\n  borderBottomColor: string\n  borderBottomLeftRadius: number\n  borderBottomRightRadius: number\n  borderBottomWidth: number\n  borderColor: string\n  borderLeftColor: string\n  borderLeftWidth: number\n  borderRadius: number\n  borderRightColor: string\n  borderRightWidth: number\n  borderStyle: \"solid\" | \"dotted\" | \"dashed\"\n  borderTopColor: string\n  borderTopLeftRadius: number\n  borderTopRightRadius: number\n  borderTopWidth: number\n  borderWidth: number\n  color: string\n  fontFamily: string\n  fontSize: number\n  fontStyle: \"normal\" | \"italic\"\n  fontWeight:\n    | \"normal\"\n    | \"bold\"\n    | \"100\"\n    | \"200\"\n    | \"300\"\n    | \"400\"\n    | \"500\"\n    | \"600\"\n    | \"700\"\n    | \"800\"\n    | \"900\"\n  letterSpacing: number\n  lineHeight: number\n  opacity: number\n  // RN 0.77+. A ring drawn around the border box that takes no layout space\n  // — CSS `outline`, which GTK4 implements natively and Adwaita itself uses\n  // for every focus ring in the theme.\n  outlineColor: string\n  outlineOffset: number\n  outlineStyle: \"solid\" | \"dotted\" | \"dashed\"\n  outlineWidth: number\n  // NOT emitted to CSS (no such GTK CSS property): the Text component applies\n  // it via label props using the pure style/text-align helper.\n  textAlign: \"auto\" | \"left\" | \"right\" | \"center\" | \"justify\"\n  // NOT emitted to CSS either — GTK4 CSS has no widget `text-decoration`.\n  // Pango carries it, so the Text component turns it into the label's\n  // attribute list using the pure style/text-decoration helper.\n  textDecorationLine: TextDecorationLine\n  // NOT emitted to CSS (GTK4 has no widget `transform` property): composed\n  // into a Transform2D by style/transform.ts and applied as the GskTransform\n  // of the child's allocation by the container's layout manager.\n  transform: TransformPart[]\n}>\n\n// RN pointerEvents (also allowed in styles since RN 0.71); behavioral, so\n// it belongs to neither the layout nor the visual bucket — splitStyle\n// consumes it without routing it and View reads it from the flattened style.\nexport type PointerEventsValue = \"auto\" | \"none\" | \"box-none\" | \"box-only\"\n\n// The third bucket, named rather than inlined into FlatStyle below: props\n// that are supported but consumed by the component that owns the behavior,\n// not by either half of the style pipeline. Having a name for it is what\n// lets splitStyle state which keys it deliberately routes nowhere, instead\n// of reporting them as unknown — the drift this type was born from.\nexport type BehavioralStyle = Partial<{\n  pointerEvents: PointerEventsValue\n  // RN's paint order among siblings. Not a Yoga property (it changes nothing\n  // about where anything is laid out) and not a CSS one (GTK4 has no z-order\n  // declaration): the container widget sorts its snapshot and its picking by\n  // it — see gtkx/bridge/view-box.ts.\n  zIndex: number\n}>\n\nexport type FlatStyle = LayoutStyle & VisualStyle & BehavioralStyle\n\n// Style prop as components accept it: single object, array (with falsy holes).\nexport type StyleProp<T = FlatStyle> =\n  T | null | undefined | false | ReadonlyArray<StyleProp<T>>\n\n// RN's three style bags, as the names ordinary React Native code writes\n// them: `StyleProp<ViewStyle>`, `StyleProp<TextStyle>`, `StyleProp<ImageStyle>`.\n//\n// They are all `FlatStyle` here, and deliberately so. RN splits the bag\n// three ways to keep `fontWeight` off a `View` and `resizeMode` off a\n// `Text`; this platform's split is a different one (layout → Yoga, visual →\n// GTK CSS, see style/split-style.ts) and it does not follow component\n// boundaries. Narrowing these three to subsets would reject styles that\n// work — and the names exist so that a file shared with iOS and Android\n// compiles, not so that this platform can re-police RN's taxonomy.\n//\n// Found by porting react-native-reanimated-dnd's example app, where\n// `StyleProp<ViewStyle>` on a `Droppable`'s `activeStyle` is the ordinary\n// way to type it and there was no name to import.\nexport type ViewStyle = FlatStyle\nexport type TextStyle = FlatStyle\nexport type ImageStyle = FlatStyle\n\n// Result of classifying a flattened style (produced by the style system):\nexport type SplitStyle = {\n  layout: LayoutStyle\n  visual: VisualStyle\n}\n\n// --- layout engine ----------------------------------------------------------\n\nexport type Rect = {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n\nexport type MeasureConstraintMode = \"undefined\" | \"exactly\" | \"at-most\"\n\nexport type MeasureSize = { width: number; height: number }\n\n// Measure callback for leaf nodes (text, images): implemented by components\n// using bridge probes; called by the engine during Yoga layout passes.\nexport type MeasureFn = (\n  width: number,\n  widthMode: MeasureConstraintMode,\n  height: number,\n  heightMode: MeasureConstraintMode,\n) => MeasureSize\n\n// Handle the layout engine gives every mounted component.\nexport interface LayoutNodeApi {\n  setStyle(style: LayoutStyle): void\n  setMeasureFn(measure: MeasureFn | null): void\n  markDirty(): void\n  getRect(): Rect | null\n  setOnLayout(callback: ((rect: Rect) => void) | null): void\n}\n\n// --- subscriptions ----------------------------------------------------------\n\nexport type SubscriptionHandle = { remove(): void }\n"]}

package/dist/dnd/context.d.ts

@@ -0,0 +1,69 @@
+import { type ReactNode, type RefObject } from "react";
+import type { MeasureHandle } from "../components/measure";
+import type { DroppedItemsMap, DropProviderProps } from "./types";
+export type DraggingPayload = {
+    x: number;
+    y: number;
+    tx: number;
+    ty: number;
+    itemData: unknown;
+};
+/** A drag this provider has seen begin and not yet seen end. */
+export type ActiveDrag = {
+    draggableId: string;
+    data: unknown;
+    /** The dragged view's own origin, in the provider view's coordinates. */
+    originX: number;
+    originY: number;
+    /** Where the pointer was when the drag began, same coordinates — the
+     *  origin `tx`/`ty` are measured from. */
+    startX: number;
+    startY: number;
+    onDragging?: (payload: DraggingPayload) => void;
+};
+export type DropRegistration = {
+    droppableId: string;
+    capacity: number;
+};
+export type DropContextValue = {
+    /** Register a draggable's payload so a drop can resolve the id back to the
+     *  data it stands for. */
+    registerDraggable: (draggableId: string, data: unknown) => void;
+    unregisterDraggable: (draggableId: string) => void;
+    dataFor: (draggableId: string) => {
+        found: boolean;
+        data: unknown;
+    };
+    registerDroppable: (registration: DropRegistration) => void;
+    unregisterDroppable: (droppableId: string) => void;
+    hasAvailableCapacity: (droppableId: string) => boolean;
+    registerDroppedItem: (draggableId: string, droppableId: string, data: unknown) => void;
+    unregisterDroppedItem: (draggableId: string) => void;
+    getDroppedItems: () => DroppedItemsMap;
+    /** Called by a `Draggable` from `drag-begin` / `drag-end`. */
+    beginDrag: (drag: ActiveDrag) => void;
+    endDrag: () => void;
+    /** The provider's own view, so a draggable can measure its origin in the
+     *  same coordinates the motion controller reports. Null when a draggable
+     *  is used outside any provider. */
+    providerView: RefObject<MeasureHandle | null> | null;
+};
+export declare const DropContext: React.Context<DropContextValue>;
+export declare const useDropContext: () => DropContextValue;
+/**
+ * Scopes a set of draggables and droppables, and reports the drag as it
+ * happens.
+ *
+ * ```tsx
+ * <DropProvider>
+ *   <Droppable onDrop={(task) => assign(task)}>…</Droppable>
+ *   <Draggable data={task}>…</Draggable>
+ * </DropProvider>
+ * ```
+ *
+ * Unlike upstream this renders a `View` of its own, because `onDragging`
+ * needs a widget to hang a `GtkDropControllerMotion` on. It is a plain
+ * `flex: 1` box unless `style` says otherwise, so it fills its parent the
+ * way the fragment upstream renders would have.
+ */
+export declare const DropProvider: ({ children, onDroppedItemsUpdate, onDragStart, onDragEnd, onDragging, style, testID, ref, }: DropProviderProps) => ReactNode;

package/dist/dnd/context.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// `DropProvider` — the one piece of this module that is not a GTK controller.
+//
+// GDK does the hit testing, so unlike upstream this provider keeps no slot
+// rectangles and needs no layout pass. What it does keep is the three things
+// GDK cannot carry for us:
+//
+// 1. the map from a draggable's id to its `data` (see payload.ts: a GValue
+//    cannot hold arbitrary JavaScript, so only the id travels);
+// 2. the registry of droppables, for `capacity` and `getDroppedItems`;
+// 3. the in-flight drag record, which is what makes `onDragging`
+//    reconstructable — see the GtkDropControllerMotion below.
+import { createContext, useCallback, useContext, useImperativeHandle, useMemo, useRef, } from "react";
+import { View } from "../components/view";
+import { Controllers } from "../gtk/controllers";
+import { GtkDropControllerMotion } from "../gtkx/bridge/index";
+const noop = () => { };
+// A default, so a `Draggable` used without a provider still drags — it just
+// has nowhere to record a drop. Upstream throws instead; a bare draggable is
+// a legitimate thing to demo, so this quietly does nothing.
+const ORPHAN = {
+    registerDraggable: noop,
+    unregisterDraggable: noop,
+    dataFor: () => ({ found: false, data: undefined }),
+    registerDroppable: noop,
+    unregisterDroppable: noop,
+    hasAvailableCapacity: () => true,
+    registerDroppedItem: noop,
+    unregisterDroppedItem: noop,
+    getDroppedItems: () => ({}),
+    beginDrag: noop,
+    endDrag: noop,
+    providerView: null,
+};
+export const DropContext = createContext(ORPHAN);
+export const useDropContext = () => useContext(DropContext);
+const defaultStyle = { flex: 1 };
+/**
+ * Scopes a set of draggables and droppables, and reports the drag as it
+ * happens.
+ *
+ * ```tsx
+ * <DropProvider>
+ *   <Droppable onDrop={(task) => assign(task)}>…</Droppable>
+ *   <Draggable data={task}>…</Draggable>
+ * </DropProvider>
+ * ```
+ *
+ * Unlike upstream this renders a `View` of its own, because `onDragging`
+ * needs a widget to hang a `GtkDropControllerMotion` on. It is a plain
+ * `flex: 1` box unless `style` says otherwise, so it fills its parent the
+ * way the fragment upstream renders would have.
+ */
+export const DropProvider = ({ children, onDroppedItemsUpdate, onDragStart, onDragEnd, onDragging, style, testID, ref, }) => {
+    const draggables = useRef(new Map());
+    const droppables = useRef(new Map());
+    const dropped = useRef({});
+    const active = useRef(null);
+    const providerView = useRef(null);
+    const notifyDropped = useCallback(() => {
+        onDroppedItemsUpdate?.({ ...dropped.current });
+    }, [onDroppedItemsUpdate]);
+    const value = useMemo(() => ({
+        registerDraggable: (draggableId, data) => {
+            draggables.current.set(draggableId, data);
+        },
+        unregisterDraggable: (draggableId) => {
+            draggables.current.delete(draggableId);
+        },
+        dataFor: (draggableId) => ({
+            found: draggables.current.has(draggableId),
+            data: draggables.current.get(draggableId),
+        }),
+        registerDroppable: (registration) => {
+            droppables.current.set(registration.droppableId, registration);
+        },
+        unregisterDroppable: (droppableId) => {
+            droppables.current.delete(droppableId);
+        },
+        hasAvailableCapacity: (droppableId) => {
+            const registration = droppables.current.get(droppableId);
+            if (!registration ||
+                registration.capacity === Number.POSITIVE_INFINITY) {
+                return true;
+            }
+            const held = Object.values(dropped.current).filter((entry) => entry.droppableId === droppableId).length;
+            return held < registration.capacity;
+        },
+        registerDroppedItem: (draggableId, droppableId, data) => {
+            dropped.current = {
+                ...dropped.current,
+                [draggableId]: { droppableId, data },
+            };
+            notifyDropped();
+        },
+        unregisterDroppedItem: (draggableId) => {
+            if (!(draggableId in dropped.current)) {
+                return;
+            }
+            const next = { ...dropped.current };
+            delete next[draggableId];
+            dropped.current = next;
+            notifyDropped();
+        },
+        getDroppedItems: () => ({ ...dropped.current }),
+        beginDrag: (drag) => {
+            active.current = drag;
+            onDragStart?.(drag.data);
+        },
+        endDrag: () => {
+            const drag = active.current;
+            active.current = null;
+            if (drag) {
+                onDragEnd?.(drag.data);
+            }
+        },
+        providerView,
+    }), [notifyDropped, onDragStart, onDragEnd]);
+    useImperativeHandle(ref, () => ({
+        // See types.ts: a no-op because GDK re-hit-tests on every motion.
+        requestPositionUpdate: noop,
+        getDroppedItems: () => ({ ...dropped.current }),
+    }), []);
+    // The whole reason this provider owns a view. `GtkDragSource` goes quiet
+    // between `drag-begin` and `drag-end`: once the drag starts the source is
+    // out of the loop and the compositor owns the icon. `GtkDropControllerMotion`
+    // is the controller that tracks pointer motion DURING a drag, over any
+    // widget, so one here sees the drag cross the provider's whole area — which
+    // is exactly what upstream's `onDragging` reports.
+    const reportMotion = useCallback((x, y) => {
+        const drag = active.current;
+        if (!drag) {
+            return;
+        }
+        const payload = {
+            x: drag.originX,
+            y: drag.originY,
+            // The translation the view WOULD have had: how far the pointer has
+            // travelled since the drag began.
+            tx: x - drag.startX,
+            ty: y - drag.startY,
+            itemData: drag.data,
+        };
+        drag.onDragging?.(payload);
+        onDragging?.(payload);
+    }, [onDragging]);
+    return (_jsx(DropContext.Provider, { value: value, children: _jsxs(View, { ref: providerView, testID: testID, style: style ?? defaultStyle, children: [_jsx(Controllers, { children: _jsx(GtkDropControllerMotion, { onEnter: reportMotion, onMotion: reportMotion }) }), children] }) }));
+};
+//# sourceMappingURL=context.js.map

package/dist/dnd/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/dnd/context.tsx"],"names":[],"mappings":"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","sourcesContent":["// `DropProvider` — the one piece of this module that is not a GTK controller.\n//\n// GDK does the hit testing, so unlike upstream this provider keeps no slot\n// rectangles and needs no layout pass. What it does keep is the three things\n// GDK cannot carry for us:\n//\n// 1. the map from a draggable's id to its `data` (see payload.ts: a GValue\n//    cannot hold arbitrary JavaScript, so only the id travels);\n// 2. the registry of droppables, for `capacity` and `getDroppedItems`;\n// 3. the in-flight drag record, which is what makes `onDragging`\n//    reconstructable — see the GtkDropControllerMotion below.\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type ReactNode,\n  type RefObject,\n} from \"react\"\nimport type { MeasureHandle } from \"../components/measure\"\nimport { View } from \"../components/view\"\nimport { Controllers } from \"../gtk/controllers\"\nimport { GtkDropControllerMotion } from \"../gtkx/bridge/index\"\nimport type {\n  DroppedItemsMap,\n  DropProviderProps,\n  DropProviderRef,\n} from \"./types\"\n\nexport type DraggingPayload = {\n  x: number\n  y: number\n  tx: number\n  ty: number\n  itemData: unknown\n}\n\n/** A drag this provider has seen begin and not yet seen end. */\nexport type ActiveDrag = {\n  draggableId: string\n  data: unknown\n  /** The dragged view's own origin, in the provider view's coordinates. */\n  originX: number\n  originY: number\n  /** Where the pointer was when the drag began, same coordinates — the\n   *  origin `tx`/`ty` are measured from. */\n  startX: number\n  startY: number\n  onDragging?: (payload: DraggingPayload) => void\n}\n\nexport type DropRegistration = { droppableId: string; capacity: number }\n\nexport type DropContextValue = {\n  /** Register a draggable's payload so a drop can resolve the id back to the\n   *  data it stands for. */\n  registerDraggable: (draggableId: string, data: unknown) => void\n  unregisterDraggable: (draggableId: string) => void\n  dataFor: (draggableId: string) => { found: boolean; data: unknown }\n\n  registerDroppable: (registration: DropRegistration) => void\n  unregisterDroppable: (droppableId: string) => void\n  hasAvailableCapacity: (droppableId: string) => boolean\n\n  registerDroppedItem: (\n    draggableId: string,\n    droppableId: string,\n    data: unknown,\n  ) => void\n  unregisterDroppedItem: (draggableId: string) => void\n  getDroppedItems: () => DroppedItemsMap\n\n  /** Called by a `Draggable` from `drag-begin` / `drag-end`. */\n  beginDrag: (drag: ActiveDrag) => void\n  endDrag: () => void\n\n  /** The provider's own view, so a draggable can measure its origin in the\n   *  same coordinates the motion controller reports. Null when a draggable\n   *  is used outside any provider. */\n  providerView: RefObject<MeasureHandle | null> | null\n}\n\nconst noop = (): void => {}\n\n// A default, so a `Draggable` used without a provider still drags — it just\n// has nowhere to record a drop. Upstream throws instead; a bare draggable is\n// a legitimate thing to demo, so this quietly does nothing.\nconst ORPHAN: DropContextValue = {\n  registerDraggable: noop,\n  unregisterDraggable: noop,\n  dataFor: () => ({ found: false, data: undefined }),\n  registerDroppable: noop,\n  unregisterDroppable: noop,\n  hasAvailableCapacity: () => true,\n  registerDroppedItem: noop,\n  unregisterDroppedItem: noop,\n  getDroppedItems: () => ({}),\n  beginDrag: noop,\n  endDrag: noop,\n  providerView: null,\n}\n\nexport const DropContext = createContext<DropContextValue>(ORPHAN)\n\nexport const useDropContext = (): DropContextValue => useContext(DropContext)\n\nconst defaultStyle = { flex: 1 } as const\n\n/**\n * Scopes a set of draggables and droppables, and reports the drag as it\n * happens.\n *\n * ```tsx\n * <DropProvider>\n *   <Droppable onDrop={(task) => assign(task)}>…</Droppable>\n *   <Draggable data={task}>…</Draggable>\n * </DropProvider>\n * ```\n *\n * Unlike upstream this renders a `View` of its own, because `onDragging`\n * needs a widget to hang a `GtkDropControllerMotion` on. It is a plain\n * `flex: 1` box unless `style` says otherwise, so it fills its parent the\n * way the fragment upstream renders would have.\n */\nexport const DropProvider = ({\n  children,\n  onDroppedItemsUpdate,\n  onDragStart,\n  onDragEnd,\n  onDragging,\n  style,\n  testID,\n  ref,\n}: DropProviderProps): ReactNode => {\n  const draggables = useRef(new Map<string, unknown>())\n  const droppables = useRef(new Map<string, DropRegistration>())\n  const dropped = useRef<DroppedItemsMap>({})\n  const active = useRef<ActiveDrag | null>(null)\n  const providerView = useRef<MeasureHandle | null>(null)\n\n  const notifyDropped = useCallback(() => {\n    onDroppedItemsUpdate?.({ ...dropped.current })\n  }, [onDroppedItemsUpdate])\n\n  const value = useMemo<DropContextValue>(\n    () => ({\n      registerDraggable: (draggableId, data) => {\n        draggables.current.set(draggableId, data)\n      },\n      unregisterDraggable: (draggableId) => {\n        draggables.current.delete(draggableId)\n      },\n      dataFor: (draggableId) => ({\n        found: draggables.current.has(draggableId),\n        data: draggables.current.get(draggableId),\n      }),\n\n      registerDroppable: (registration) => {\n        droppables.current.set(registration.droppableId, registration)\n      },\n      unregisterDroppable: (droppableId) => {\n        droppables.current.delete(droppableId)\n      },\n      hasAvailableCapacity: (droppableId) => {\n        const registration = droppables.current.get(droppableId)\n        if (\n          !registration ||\n          registration.capacity === Number.POSITIVE_INFINITY\n        ) {\n          return true\n        }\n        const held = Object.values(dropped.current).filter(\n          (entry) => entry.droppableId === droppableId,\n        ).length\n        return held < registration.capacity\n      },\n\n      registerDroppedItem: (draggableId, droppableId, data) => {\n        dropped.current = {\n          ...dropped.current,\n          [draggableId]: { droppableId, data },\n        }\n        notifyDropped()\n      },\n      unregisterDroppedItem: (draggableId) => {\n        if (!(draggableId in dropped.current)) {\n          return\n        }\n        const next = { ...dropped.current }\n        delete next[draggableId]\n        dropped.current = next\n        notifyDropped()\n      },\n      getDroppedItems: () => ({ ...dropped.current }),\n\n      beginDrag: (drag) => {\n        active.current = drag\n        onDragStart?.(drag.data)\n      },\n      endDrag: () => {\n        const drag = active.current\n        active.current = null\n        if (drag) {\n          onDragEnd?.(drag.data)\n        }\n      },\n\n      providerView,\n    }),\n    [notifyDropped, onDragStart, onDragEnd],\n  )\n\n  useImperativeHandle(\n    ref,\n    (): DropProviderRef => ({\n      // See types.ts: a no-op because GDK re-hit-tests on every motion.\n      requestPositionUpdate: noop,\n      getDroppedItems: () => ({ ...dropped.current }),\n    }),\n    [],\n  )\n\n  // The whole reason this provider owns a view. `GtkDragSource` goes quiet\n  // between `drag-begin` and `drag-end`: once the drag starts the source is\n  // out of the loop and the compositor owns the icon. `GtkDropControllerMotion`\n  // is the controller that tracks pointer motion DURING a drag, over any\n  // widget, so one here sees the drag cross the provider's whole area — which\n  // is exactly what upstream's `onDragging` reports.\n  const reportMotion = useCallback(\n    (x: number, y: number) => {\n      const drag = active.current\n      if (!drag) {\n        return\n      }\n      const payload: DraggingPayload = {\n        x: drag.originX,\n        y: drag.originY,\n        // The translation the view WOULD have had: how far the pointer has\n        // travelled since the drag began.\n        tx: x - drag.startX,\n        ty: y - drag.startY,\n        itemData: drag.data,\n      }\n      drag.onDragging?.(payload)\n      onDragging?.(payload)\n    },\n    [onDragging],\n  )\n\n  return (\n    <DropContext.Provider value={value}>\n      <View\n        ref={providerView}\n        testID={testID}\n        style={style ?? defaultStyle}\n      >\n        <Controllers>\n          <GtkDropControllerMotion\n            onEnter={reportMotion}\n            onMotion={reportMotion}\n          />\n        </Controllers>\n        {children}\n      </View>\n    </DropContext.Provider>\n  )\n}\n"]}

package/dist/dnd/draggable.d.ts

@@ -0,0 +1,59 @@
+import { type ReactNode, type RefObject } from "react";
+import type { MeasureHandle } from "../components/measure";
+import { type DraggableHandleProps, type DraggableProps, type UseDraggableOptions, type UseDraggableReturn } from "./types";
+type DraggableContextValue = {
+    /** The controllers a handle mounts on its own widget instead of the
+     *  item's. */
+    source: ReactNode;
+    registerHandle: (registered: boolean) => void;
+};
+export declare const DraggableContext: React.Context<DraggableContextValue | null>;
+export type UseDraggableResult = UseDraggableReturn & {
+    /** The view the drag source belongs to must be measurable, because
+     *  `onDragging` reports the item's origin. Upstream returns an
+     *  `useAnimatedRef` under this name for the same reason. */
+    animatedViewRef: RefObject<MeasureHandle | null>;
+    /** The GTK controllers themselves, so a caller that renders its own handle
+     *  can place them. `animatedViewProps.children` is this, or null when a
+     *  handle has claimed it. */
+    dragControllers: ReactNode;
+};
+/**
+ * The drag half of the module, as a hook, for a component that owns its own
+ * view.
+ *
+ * `animatedViewProps` keeps upstream's name for spread compatibility. What
+ * it carries differs: upstream's is a Reanimated `style`, ours is the GTK
+ * controllers as `children`, because on this platform the drag is a property
+ * of the widget rather than of a transform.
+ */
+export declare const useDraggable: <TData>(options: UseDraggableOptions<TData>) => UseDraggableResult;
+/**
+ * Makes its children draggable, carrying `data` to whatever `Droppable`
+ * accepts it.
+ *
+ * ```tsx
+ * <Draggable data={task}>
+ *   <View style={styles.card}>
+ *     <Text>{task.title}</Text>
+ *   </View>
+ * </Draggable>
+ * ```
+ *
+ * With a `Draggable.Handle` inside it the drag starts only from the handle —
+ * and on this platform that is literal: the `GtkDragSource` is attached to
+ * the handle's own widget, so the rest of the item stays free to scroll,
+ * press and select.
+ */
+export declare const Draggable: {
+    <TData>({ children, style, testID, ...options }: DraggableProps<TData>): ReactNode;
+    Handle: ({ children, style, testID, }: DraggableHandleProps) => ReactNode;
+};
+/**
+ * The region a drag may start from. Everything outside it stays inert.
+ *
+ * Upstream's handle gates a pan gesture; here it owns the `GtkDragSource`
+ * outright, which is a closer match to how GTK's own list rows work.
+ */
+export declare const DraggableHandle: ({ children, style, testID, }: DraggableHandleProps) => ReactNode;
+export {};

package/dist/dnd/draggable.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// `Draggable`, `Draggable.Handle` and `useDraggable`.
+//
+// Upstream's draggable moves itself: a Reanimated transform follows the
+// finger and springs back, or into the drop slot, at the end. Here the view
+// never moves — GDK carries a picture of it (a `Gtk.WidgetPaintable`) above
+// every window, with the theme's own cursors. That single difference is
+// where `dragAxis`, `dragBoundsRef` and `animationFunction` go, and it is
+// also why a drag here looks like the rest of the desktop instead of like a
+// mobile app. docs/research/drag-and-drop.md argues the trade.
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { View } from "../components/view";
+import { useDropContext } from "./context";
+import { DragSourceControllers } from "./gtk-controllers";
+import { FREE_SCOPE, nextDraggableId } from "./payload";
+import { DraggableState, } from "./types";
+export const DraggableContext = createContext(null);
+/**
+ * The drag half of the module, as a hook, for a component that owns its own
+ * view.
+ *
+ * `animatedViewProps` keeps upstream's name for spread compatibility. What
+ * it carries differs: upstream's is a Reanimated `style`, ours is the GTK
+ * controllers as `children`, because on this platform the drag is a property
+ * of the widget rather than of a transform.
+ */
+export const useDraggable = (options) => {
+    const { data, draggableId, dragDisabled = false, onDragStart, onDragEnd, onDragging, onStateChange, } = options;
+    const context = useDropContext();
+    const viewRef = useRef(null);
+    const grab = useRef({ x: 0, y: 0 });
+    const [state, setState] = useState(DraggableState.IDLE);
+    const [hasHandle, setHasHandle] = useState(false);
+    // Stable for the component's lifetime, as upstream's is: the id is what
+    // travels through GDK, so it cannot change under an in-flight drag. Lazy
+    // initial state rather than a ref, because a ref may not be read during
+    // render.
+    const [generatedId] = useState(nextDraggableId);
+    const id = draggableId ?? generatedId;
+    // The registry is what turns the id back into `data` on drop, so it tracks
+    // every change to `data`, not just the mount.
+    useEffect(() => {
+        context.registerDraggable(id, data);
+        return () => context.unregisterDraggable(id);
+    }, [context, id, data]);
+    useEffect(() => {
+        onStateChange?.(state);
+    }, [state, onStateChange]);
+    const registerHandle = useCallback((registered) => {
+        setHasHandle(registered);
+    }, []);
+    const handleGrab = useCallback((x, y) => {
+        grab.current = { x, y };
+    }, []);
+    const handleDragBegin = useCallback(() => {
+        // Measured now rather than on layout: the origin only matters while a
+        // drag is in flight, and the moment it starts is the one time it is
+        // guaranteed current. `measureLayout` reports against the provider's own
+        // view, which is the coordinate space its motion controller uses.
+        let originX = 0;
+        let originY = 0;
+        const provider = context.providerView?.current;
+        if (provider && viewRef.current) {
+            viewRef.current.measureLayout(provider, (left, top) => {
+                originX = left;
+                originY = top;
+            });
+        }
+        context.beginDrag({
+            draggableId: id,
+            data,
+            originX,
+            originY,
+            startX: originX + grab.current.x,
+            startY: originY + grab.current.y,
+            onDragging: onDragging,
+        });
+        setState(DraggableState.DRAGGING);
+        onDragStart?.(data);
+    }, [context, id, data, onDragStart, onDragging]);
+    const handleDragEnd = useCallback((dropped) => {
+        context.endDrag();
+        // DROPPED is sticky until the next drag begins, which is as close as
+        // this platform gets to upstream's meaning ("the item is sitting in a
+        // slot"): the item never left, so there is no return journey to end it.
+        setState(dropped ? DraggableState.DROPPED : DraggableState.IDLE);
+        onDragEnd?.(data);
+    }, [context, data, onDragEnd]);
+    // A handle registers in a passive effect, so on the very first commit
+    // `hasHandle` is still false and the item would mount a second drag source
+    // that the next commit immediately removes. Deferring the item's own copy
+    // by one commit removes the flicker entirely: both state updates land in
+    // the same re-render. The delay is unobservable for the same reason
+    // `Controllers` gives for attaching late — no pointer reaches a widget in
+    // its first frame.
+    const [mounted, setMounted] = useState(false);
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    useEffect(() => setMounted(true), []);
+    const dragControllers = dragDisabled ? null : (_jsx(DragSourceControllers, { payload: { scope: FREE_SCOPE, id }, onGrab: handleGrab, onDragBegin: handleDragBegin, onDragEnd: handleDragEnd }));
+    return {
+        animatedViewProps: {
+            children: mounted && !hasHandle ? dragControllers : null,
+        },
+        state,
+        hasHandle,
+        registerHandle,
+        animatedViewRef: viewRef,
+        dragControllers,
+    };
+};
+/**
+ * Makes its children draggable, carrying `data` to whatever `Droppable`
+ * accepts it.
+ *
+ * ```tsx
+ * <Draggable data={task}>
+ *   <View style={styles.card}>
+ *     <Text>{task.title}</Text>
+ *   </View>
+ * </Draggable>
+ * ```
+ *
+ * With a `Draggable.Handle` inside it the drag starts only from the handle —
+ * and on this platform that is literal: the `GtkDragSource` is attached to
+ * the handle's own widget, so the rest of the item stays free to scroll,
+ * press and select.
+ */
+export const Draggable = ({ children, style, testID, ...options }) => {
+    const { animatedViewProps, animatedViewRef, dragControllers, registerHandle, } = useDraggable(options);
+    const contextValue = useMemo(() => ({ source: dragControllers, registerHandle }), [dragControllers, registerHandle]);
+    return (_jsx(DraggableContext.Provider, { value: contextValue, children: _jsxs(View, { ref: animatedViewRef, style: style, testID: testID, children: [animatedViewProps.children, children] }) }));
+};
+/**
+ * The region a drag may start from. Everything outside it stays inert.
+ *
+ * Upstream's handle gates a pan gesture; here it owns the `GtkDragSource`
+ * outright, which is a closer match to how GTK's own list rows work.
+ */
+export const DraggableHandle = ({ children, style, testID, }) => {
+    const context = useContext(DraggableContext);
+    const registerHandle = context?.registerHandle;
+    useEffect(() => {
+        registerHandle?.(true);
+        return () => registerHandle?.(false);
+    }, [registerHandle]);
+    return (_jsxs(View, { style: style, testID: testID, children: [context?.source, children] }));
+};
+Draggable.Handle = DraggableHandle;
+//# sourceMappingURL=draggable.js.map

package/dist/dnd/draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.js","sourceRoot":"","sources":["../../src/dnd/draggable.tsx"],"names":[],"mappings":"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","sourcesContent":["// `Draggable`, `Draggable.Handle` and `useDraggable`.\n//\n// Upstream's draggable moves itself: a Reanimated transform follows the\n// finger and springs back, or into the drop slot, at the end. Here the view\n// never moves — GDK carries a picture of it (a `Gtk.WidgetPaintable`) above\n// every window, with the theme's own cursors. That single difference is\n// where `dragAxis`, `dragBoundsRef` and `animationFunction` go, and it is\n// also why a drag here looks like the rest of the desktop instead of like a\n// mobile app. docs/research/drag-and-drop.md argues the trade.\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n  type RefObject,\n} from \"react\"\nimport type { MeasureHandle } from \"../components/measure\"\nimport { View } from \"../components/view\"\nimport { useDropContext, type DraggingPayload } from \"./context\"\nimport { DragSourceControllers } from \"./gtk-controllers\"\nimport { FREE_SCOPE, nextDraggableId } from \"./payload\"\nimport {\n  DraggableState,\n  type DraggableHandleProps,\n  type DraggableProps,\n  type UseDraggableOptions,\n  type UseDraggableReturn,\n} from \"./types\"\n\ntype DraggableContextValue = {\n  /** The controllers a handle mounts on its own widget instead of the\n   *  item's. */\n  source: ReactNode\n  registerHandle: (registered: boolean) => void\n}\n\nexport const DraggableContext = createContext<DraggableContextValue | null>(\n  null,\n)\n\nexport type UseDraggableResult = UseDraggableReturn & {\n  /** The view the drag source belongs to must be measurable, because\n   *  `onDragging` reports the item's origin. Upstream returns an\n   *  `useAnimatedRef` under this name for the same reason. */\n  animatedViewRef: RefObject<MeasureHandle | null>\n  /** The GTK controllers themselves, so a caller that renders its own handle\n   *  can place them. `animatedViewProps.children` is this, or null when a\n   *  handle has claimed it. */\n  dragControllers: ReactNode\n}\n\n/**\n * The drag half of the module, as a hook, for a component that owns its own\n * view.\n *\n * `animatedViewProps` keeps upstream's name for spread compatibility. What\n * it carries differs: upstream's is a Reanimated `style`, ours is the GTK\n * controllers as `children`, because on this platform the drag is a property\n * of the widget rather than of a transform.\n */\nexport const useDraggable = <TData,>(\n  options: UseDraggableOptions<TData>,\n): UseDraggableResult => {\n  const {\n    data,\n    draggableId,\n    dragDisabled = false,\n    onDragStart,\n    onDragEnd,\n    onDragging,\n    onStateChange,\n  } = options\n\n  const context = useDropContext()\n  const viewRef = useRef<MeasureHandle | null>(null)\n  const grab = useRef({ x: 0, y: 0 })\n  const [state, setState] = useState(DraggableState.IDLE)\n  const [hasHandle, setHasHandle] = useState(false)\n\n  // Stable for the component's lifetime, as upstream's is: the id is what\n  // travels through GDK, so it cannot change under an in-flight drag. Lazy\n  // initial state rather than a ref, because a ref may not be read during\n  // render.\n  const [generatedId] = useState(nextDraggableId)\n  const id = draggableId ?? generatedId\n\n  // The registry is what turns the id back into `data` on drop, so it tracks\n  // every change to `data`, not just the mount.\n  useEffect(() => {\n    context.registerDraggable(id, data)\n    return () => context.unregisterDraggable(id)\n  }, [context, id, data])\n\n  useEffect(() => {\n    onStateChange?.(state)\n  }, [state, onStateChange])\n\n  const registerHandle = useCallback((registered: boolean) => {\n    setHasHandle(registered)\n  }, [])\n\n  const handleGrab = useCallback((x: number, y: number) => {\n    grab.current = { x, y }\n  }, [])\n\n  const handleDragBegin = useCallback(() => {\n    // Measured now rather than on layout: the origin only matters while a\n    // drag is in flight, and the moment it starts is the one time it is\n    // guaranteed current. `measureLayout` reports against the provider's own\n    // view, which is the coordinate space its motion controller uses.\n    let originX = 0\n    let originY = 0\n    const provider = context.providerView?.current\n    if (provider && viewRef.current) {\n      viewRef.current.measureLayout(provider, (left, top) => {\n        originX = left\n        originY = top\n      })\n    }\n    context.beginDrag({\n      draggableId: id,\n      data,\n      originX,\n      originY,\n      startX: originX + grab.current.x,\n      startY: originY + grab.current.y,\n      onDragging: onDragging as ((p: DraggingPayload) => void) | undefined,\n    })\n    setState(DraggableState.DRAGGING)\n    onDragStart?.(data)\n  }, [context, id, data, onDragStart, onDragging])\n\n  const handleDragEnd = useCallback(\n    (dropped: boolean) => {\n      context.endDrag()\n      // DROPPED is sticky until the next drag begins, which is as close as\n      // this platform gets to upstream's meaning (\"the item is sitting in a\n      // slot\"): the item never left, so there is no return journey to end it.\n      setState(dropped ? DraggableState.DROPPED : DraggableState.IDLE)\n      onDragEnd?.(data)\n    },\n    [context, data, onDragEnd],\n  )\n\n  // A handle registers in a passive effect, so on the very first commit\n  // `hasHandle` is still false and the item would mount a second drag source\n  // that the next commit immediately removes. Deferring the item's own copy\n  // by one commit removes the flicker entirely: both state updates land in\n  // the same re-render. The delay is unobservable for the same reason\n  // `Controllers` gives for attaching late — no pointer reaches a widget in\n  // its first frame.\n  const [mounted, setMounted] = useState(false)\n  // eslint-disable-next-line react-hooks/set-state-in-effect\n  useEffect(() => setMounted(true), [])\n\n  const dragControllers = dragDisabled ? null : (\n    <DragSourceControllers\n      payload={{ scope: FREE_SCOPE, id }}\n      onGrab={handleGrab}\n      onDragBegin={handleDragBegin}\n      onDragEnd={handleDragEnd}\n    />\n  )\n\n  return {\n    animatedViewProps: {\n      children: mounted && !hasHandle ? dragControllers : null,\n    },\n    state,\n    hasHandle,\n    registerHandle,\n    animatedViewRef: viewRef,\n    dragControllers,\n  }\n}\n\n/**\n * Makes its children draggable, carrying `data` to whatever `Droppable`\n * accepts it.\n *\n * ```tsx\n * <Draggable data={task}>\n *   <View style={styles.card}>\n *     <Text>{task.title}</Text>\n *   </View>\n * </Draggable>\n * ```\n *\n * With a `Draggable.Handle` inside it the drag starts only from the handle —\n * and on this platform that is literal: the `GtkDragSource` is attached to\n * the handle's own widget, so the rest of the item stays free to scroll,\n * press and select.\n */\nexport const Draggable = <TData,>({\n  children,\n  style,\n  testID,\n  ...options\n}: DraggableProps<TData>): ReactNode => {\n  const {\n    animatedViewProps,\n    animatedViewRef,\n    dragControllers,\n    registerHandle,\n  } = useDraggable<TData>(options)\n\n  const contextValue = useMemo<DraggableContextValue>(\n    () => ({ source: dragControllers, registerHandle }),\n    [dragControllers, registerHandle],\n  )\n\n  return (\n    <DraggableContext.Provider value={contextValue}>\n      <View\n        ref={animatedViewRef}\n        style={style}\n        testID={testID}\n      >\n        {animatedViewProps.children}\n        {children}\n      </View>\n    </DraggableContext.Provider>\n  )\n}\n\n/**\n * The region a drag may start from. Everything outside it stays inert.\n *\n * Upstream's handle gates a pan gesture; here it owns the `GtkDragSource`\n * outright, which is a closer match to how GTK's own list rows work.\n */\nexport const DraggableHandle = ({\n  children,\n  style,\n  testID,\n}: DraggableHandleProps): ReactNode => {\n  const context = useContext(DraggableContext)\n  const registerHandle = context?.registerHandle\n\n  useEffect(() => {\n    registerHandle?.(true)\n    return () => registerHandle?.(false)\n  }, [registerHandle])\n\n  return (\n    <View\n      style={style}\n      testID={testID}\n    >\n      {context?.source}\n      {children}\n    </View>\n  )\n}\n\nDraggable.Handle = DraggableHandle\n"]}

package/dist/dnd/droppable.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+import type { DroppableProps, UseDroppableOptions, UseDroppableReturn } from "./types";
+/** The drop half of the module, as a hook, for a component that owns its own
+ *  view. `viewProps.children` are the GTK controllers; spread them into the
+ *  view the zone should cover. */
+export declare const useDroppable: <TData>(options: UseDroppableOptions<TData>) => UseDroppableReturn;
+/**
+ * A zone that accepts a `Draggable`'s `data`.
+ *
+ * ```tsx
+ * <Droppable
+ *   onDrop={(task) => assign(task)}
+ *   activeStyle={{ borderColor: "accent" }}
+ * >
+ *   <View style={styles.zone}>
+ *     <Text>Assign to me</Text>
+ *   </View>
+ * </Droppable>
+ * ```
+ *
+ * `capacity` is enforced at GDK level: once the zone is full it refuses the
+ * drop, so the cursor says so before the user lets go.
+ */
+export declare const Droppable: <TData>({ children, style, testID, ...options }: DroppableProps<TData>) => ReactNode;