@mapples/dnd 1.0.1

package/README.md

@@ -0,0 +1,390 @@
+# @mapples/dnd
+
+A powerful and flexible drag and drop library for React Native applications. This package provides a complete drag and drop system with gesture handling, hit detection, and hierarchical drop targets.
+
+## Features
+
+- 🎯 **Precise Hit Detection** - Advanced collision detection with configurable padding
+- 🌳 **Hierarchical Drop Targets** - Support for nested drop areas with parent-child relationships
+- 📱 **React Native Gesture Handler** - Smooth gesture recognition and handling
+- 🎨 **Customizable Drag Elements** - Support for custom drag previews and animations
+- 📊 **TypeScript Support** - Full type safety with comprehensive TSDoc documentation
+- 🔄 **Real-time Updates** - Live layout updates and position tracking
+- 🎛️ **Flexible Configuration** - Configurable drop targets with layout options
+
+## Installation
+
+```bash
+npm install @mapples/dnd
+# or
+yarn add @mapples/dnd
+```
+
+## Quick Start
+
+### Basic Setup
+
+```tsx
+import React from 'react';
+import { View, Text } from 'react-native';
+import { DnDRootView, useDrag, useDrop } from '@mapples/dnd';
+
+interface MyData {
+  id: string;
+  title: string;
+}
+
+const DraggableItem = ({ data }: { data: MyData }) => {
+  const ref = useRef<View>(null);
+  const { isDragging } = useDrag(ref, {
+    type: 'item',
+    label: data.title,
+    data: data,
+  });
+
+  return (
+    <View
+      ref={ref}
+      style={{
+        backgroundColor: isDragging ? '#e3f2fd' : '#f5f5f5',
+        padding: 16,
+        margin: 8,
+        borderRadius: 8,
+      }}
+    >
+      <Text>{data.title}</Text>
+    </View>
+  );
+};
+
+const DropZone = ({ children }: { children: React.ReactNode }) => {
+  const ref = useRef<View>(null);
+  const { isOver, dropTarget } = useDrop<MyData>(ref, {
+    canDrop: true,
+  });
+
+  return (
+    <View
+      ref={ref}
+      style={{
+        backgroundColor: isOver ? '#e8f5e8' : '#ffffff',
+        borderWidth: 2,
+        borderColor: isOver ? '#4caf50' : '#e0e0e0',
+        borderStyle: 'dashed',
+        padding: 20,
+        minHeight: 100,
+      }}
+    >
+      {children}
+    </View>
+  );
+};
+
+const App = () => {
+  const handleDrop = (event, item) => {
+    console.log('Dropped:', item.data);
+  };
+
+  return (
+    <DnDRootView<MyData> onDrop={handleDrop}>
+      <View style={{ flex: 1, padding: 20 }}>
+        <DropZone>
+          <Text>Drop items here</Text>
+        </DropZone>
+
+        <View style={{ marginTop: 20 }}>
+          <DraggableItem data={{ id: '1', title: 'Item 1' }} />
+          <DraggableItem data={{ id: '2', title: 'Item 2' }} />
+        </View>
+      </View>
+    </DnDRootView>
+  );
+};
+```
+
+## API Reference
+
+### Components
+
+#### `DnDRootView<T>`
+
+The root component that provides drag and drop functionality to its children.
+
+**Props:**
+
+- `children` - Child components
+- `DragElement?` - Optional custom drag element renderer
+- `onDrop?` - Callback fired when a drop operation completes
+
+**Example:**
+
+```tsx
+<DnDRootView<MyDataType> onDrop={handleDrop}>
+  {/* Your draggable and droppable components */}
+</DnDRootView>
+```
+
+#### `DropArea`
+
+Component that creates a drop area context for establishing parent-child relationships in the drop target hierarchy.
+
+**Props:**
+
+- `forId` - The ID of the parent drop target this area belongs to
+- `children` - Child components
+
+**Example:**
+
+```tsx
+<DropArea forId={parentId}>
+  <DropZone />
+</DropArea>
+```
+
+### Hooks
+
+#### `useDrag<DragData, DropData>(ref, item)`
+
+Makes a view draggable within the drag and drop system.
+
+**Parameters:**
+
+- `ref` - Reference to the view element that should be draggable
+- `item` - The drag item configuration with data and metadata
+
+**Returns:**
+
+- `id` - The unique ID of the drag element
+- `updateLayout` - Function to update the element's layout information
+- `isDragging` - Whether this element is currently being dragged
+
+**Example:**
+
+```tsx
+const { isDragging, updateLayout } = useDrag(ref, {
+  type: 'item',
+  label: 'My Item',
+  data: { id: '1', name: 'Item 1' },
+});
+```
+
+#### `useDrop<DragData, DropData>(ref, config?, data?)`
+
+Makes a view a drop target within the drag and drop system.
+
+**Parameters:**
+
+- `ref` - Reference to the view element that should be a drop target
+- `config?` - Optional configuration for the drop target behavior
+- `data?` - Optional data associated with this drop target
+
+**Returns:**
+
+- `id` - The unique ID of the drop element
+- `isOver` - Whether a drag is currently over this drop target
+- `dropTarget` - The current drop target information
+- `dropTargetIndex` - The index position within the drop target
+- `isDragging` - Whether any drag operation is currently active
+- `updateLayout` - Function to update the element's layout information
+
+**Example:**
+
+```tsx
+const { isOver, dropTarget } = useDrop<MyDataType>(
+  ref,
+  {
+    canDrop: true,
+    index: 0,
+    zIndex: 1,
+  },
+  { category: 'items' },
+);
+```
+
+#### `useDnD<DragData, DropData>()`
+
+Hook to access the drag and drop context.
+
+**Returns:**
+
+- `monitor` - The monitor instance that tracks drag and drop operations
+- `isDragging` - Whether a drag operation is currently active
+- `sv` - Shared value for drag coordinates
+- `svOverLayout` - Shared value for overlay layout information
+
+#### `useDropContext()`
+
+Hook to access the drop context for establishing hierarchy.
+
+**Returns:**
+
+- `parent` - The parent drop target ID
+
+### Types
+
+#### `DragItem<T>`
+
+Interface representing a draggable item with metadata and data.
+
+```tsx
+interface DragItem<T> {
+  type: string; // The type identifier for the drag item
+  label: string; // The display label for the drag item
+  icon?: FC<SvgProps>; // Optional icon component for the drag item
+  data: T; // The data payload associated with the drag item
+}
+```
+
+#### `DropTargetConfig`
+
+Interface for configuring drop target behavior and layout.
+
+```tsx
+interface DropTargetConfig {
+  canDrop?: boolean; // Whether this drop target can accept drops
+  index?: number; // The index position within the parent container
+  zIndex?: number; // The z-index for layering
+  flexDirection?: FlexDirection; // The flex direction for child elements
+}
+```
+
+#### `DnDEvent<DragData, DropData>`
+
+Interface representing a drag and drop event with associated data.
+
+```tsx
+interface DnDEvent<DragData, DropData> {
+  type: DnDEventType; // The type of drag and drop event
+  target?: number | null; // The ID of the drag target element
+  dropTarget?: DropTarget<DropData> | null; // The drop target that the drag is currently over
+  dropTargetIndex?: number | null; // The index position within the drop target
+  data?: DragData | null; // The data associated with the drag operation
+  dragCoords?: DragCoords | null; // The current coordinates of the drag operation
+}
+```
+
+## Advanced Usage
+
+### Hierarchical Drop Targets
+
+```tsx
+const NestedDropExample = () => {
+  const parentRef = useRef<View>(null);
+  const childRef = useRef<View>(null);
+
+  const { isOver: parentIsOver } = useDrop(parentRef, { canDrop: true });
+  const { isOver: childIsOver } = useDrop(childRef, { canDrop: true });
+
+  return (
+    <DnDRootView>
+      <View
+        ref={parentRef}
+        style={{ backgroundColor: parentIsOver ? 'lightblue' : 'white' }}
+      >
+        <Text>Parent Drop Zone</Text>
+
+        <DropArea forId={/* parent ID */}>
+          <View
+            ref={childRef}
+            style={{ backgroundColor: childIsOver ? 'lightgreen' : 'white' }}
+          >
+            <Text>Child Drop Zone</Text>
+          </View>
+        </DropArea>
+      </View>
+    </DnDRootView>
+  );
+};
+```
+
+### Custom Drag Element
+
+```tsx
+const CustomDragElement = ({ data }: { data: DragItem<MyData> }) => (
+  <View
+    style={{ backgroundColor: 'rgba(0,0,0,0.8)', padding: 10, borderRadius: 5 }}
+  >
+    <Text style={{ color: 'white' }}>{data.label}</Text>
+  </View>
+);
+
+const App = () => (
+  <DnDRootView<MyData> DragElement={CustomDragElement}>
+    {/* Your components */}
+  </DnDRootView>
+);
+```
+
+### Event Handling
+
+```tsx
+const App = () => {
+  const handleDrop = (event: DnDEvent<MyData>, item: DragItem<MyData>) => {
+    console.log('Drop event:', event);
+    console.log('Dropped item:', item);
+
+    // Handle the drop logic
+    if (event.dropTarget) {
+      // Move item to new position
+      moveItem(item.data, event.dropTargetIndex);
+    }
+  };
+
+  return (
+    <DnDRootView<MyData> onDrop={handleDrop}>
+      {/* Your components */}
+    </DnDRootView>
+  );
+};
+```
+
+## Configuration
+
+### Monitor Configuration
+
+The monitor can be configured with padding and outside tracking:
+
+```tsx
+// In DnDRootView, the monitor is created with:
+const monitor = new Monitor({
+  padding: 5, // Padding around drop targets for hit detection
+  trackOutside: false, // Whether to track drag operations outside the root element
+});
+```
+
+### Drop Target Configuration
+
+```tsx
+const config: DropTargetConfig = {
+  canDrop: true, // Allow drops
+  index: 0, // Position in parent
+  zIndex: 1, // Layering
+  flexDirection: FlexDirection.Row, // Layout direction
+};
+
+const { isOver } = useDrop(ref, config);
+```
+
+## Performance Considerations
+
+- Use `updateLayout()` sparingly and only when necessary
+- Consider using `useCallback` for event handlers to prevent unnecessary re-renders
+- The monitor automatically handles cleanup when components unmount
+- Hit detection is optimized with spatial indexing
+
+## TypeScript Support
+
+This package is written in TypeScript and provides full type safety. All APIs are documented with TSDoc comments for excellent IDE support and IntelliSense.
+
+## Contributing
+
+Contributions are welcome! Please ensure that:
+
+1. All new APIs include comprehensive TSDoc documentation
+2. TypeScript types are properly defined
+3. Tests are added for new functionality
+4. The README is updated for any new features
+
+## License
+
+MIT License - see LICENSE file for details.

package/dist/components/DnDRootView.d.ts

@@ -0,0 +1,13 @@
+import { DnDRootViewProps } from '../types';
+/**
+ * Root component that provides drag and drop functionality to its children.
+ * This component sets up the gesture handling, context, and monitor for the entire drag and drop system.
+ *
+ * @template T - The type of data being dragged
+ * @param props - The component props
+ * @returns The rendered drag and drop root view
+ * @public
+ */
+declare const DnDRootView: <T extends object>({ children, DragElement, onDrop, ...props }: DnDRootViewProps<T>) => import("react").JSX.Element;
+export default DnDRootView;
+//# sourceMappingURL=DnDRootView.d.ts.map

package/dist/components/DnDRootView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DnDRootView.d.ts","sourceRoot":"","sources":["../../src/components/DnDRootView.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAgB,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG1D;;;;;;;;GAQG;AACH,QAAA,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,EAAE,6CAKpC,gBAAgB,CAAC,CAAC,CAAC,gCAgGrB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/DnDRootView.js

@@ -0,0 +1,98 @@
+import { useEffect, useRef, useState } from 'react';
+import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
+import { runOnJS, useSharedValue } from 'react-native-reanimated';
+import { filter } from 'rxjs';
+import { initialDragCoords, initialOverLayout } from '../constants';
+import { DnDContextProvider } from '../context';
+import { Monitor } from '../monitor';
+import { DnDEventType } from '../types';
+import { filterEvents } from '../utils';
+/**
+ * Root component that provides drag and drop functionality to its children.
+ * This component sets up the gesture handling, context, and monitor for the entire drag and drop system.
+ *
+ * @template T - The type of data being dragged
+ * @param props - The component props
+ * @returns The rendered drag and drop root view
+ * @public
+ */
+const DnDRootView = ({ children, DragElement, onDrop, ...props }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const monitor = useRef(new Monitor({ padding: 5 })).current;
+    const sv = useSharedValue(initialDragCoords);
+    const svOverLayout = useSharedValue(initialOverLayout);
+    useEffect(() => {
+        const subscription = monitor.events
+            .pipe(filter(filterEvents(DnDEventType.DragStart, DnDEventType.DragEnd)))
+            .subscribe((e) => {
+            if (e.type === DnDEventType.DragStart) {
+                setIsDragging(true);
+                return;
+            }
+            if (e.type === DnDEventType.DragEnd) {
+                setIsDragging(false);
+                if (onDrop) {
+                    if (!e.target)
+                        return;
+                    const target = monitor.getDragTargetData(e.target);
+                    if (!target)
+                        return;
+                    onDrop(e, target.item);
+                }
+            }
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [monitor, onDrop]);
+    /**
+     * Handles pan gesture events for drag operations.
+     * @param type - The type of pan event (start, end, or drag)
+     * @param e - The gesture event payload
+     */
+    const handlePanEvents = (type, e) => {
+        monitor[type]({ x: e.absoluteX, y: e.absoluteY });
+    };
+    /**
+     * Handles tap gesture events for selection.
+     * @param e - The tap gesture event payload
+     */
+    const handleSelect = (e) => {
+        monitor.onSelect({ x: e.absoluteX, y: e.absoluteY });
+    };
+    const tap = Gesture.Tap().onEnd((e) => {
+        runOnJS(handleSelect)(e);
+    });
+    const pan = Gesture.Pan()
+        .onStart((e) => {
+        sv.set({
+            x: e.x,
+            y: e.y,
+        });
+        runOnJS(handlePanEvents)('onDragStart', e);
+    })
+        .onChange((e) => {
+        sv.set({
+            x: e.x,
+            y: e.y,
+        });
+        runOnJS(handlePanEvents)('onDrag', e);
+    })
+        .onEnd((e) => {
+        sv.set(initialDragCoords);
+        runOnJS(handlePanEvents)('onDragEnd', e);
+    });
+    const composed = Gesture.Race(pan, tap);
+    return (<DnDContextProvider value={{
+            monitor,
+            isDragging,
+            sv,
+            svOverLayout,
+        }}>
+      <GestureHandlerRootView {...props}>
+        <GestureDetector gesture={composed}>{children}</GestureDetector>
+      </GestureHandlerRootView>
+    </DnDContextProvider>);
+};
+export default DnDRootView;
+//# sourceMappingURL=DnDRootView.js.map

package/dist/components/DnDRootView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DnDRootView.js","sourceRoot":"","sources":["../../src/components/DnDRootView.tsx"],"names":[],"mappings":"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"}

package/dist/components/DropArea.d.ts

@@ -0,0 +1,13 @@
+import { FC, PropsWithChildren } from 'react';
+import { DropAreaProps } from '../types';
+/**
+ * Component that creates a drop area context for its children.
+ * This component establishes a parent-child relationship in the drop target hierarchy.
+ *
+ * @param props - The component props
+ * @returns The rendered drop area with context
+ * @public
+ */
+declare const DropArea: FC<PropsWithChildren<DropAreaProps>>;
+export default DropArea;
+//# sourceMappingURL=DropArea.d.ts.map

package/dist/components/DropArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropArea.d.ts","sourceRoot":"","sources":["../../src/components/DropArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC;;;;;;;GAOG;AACH,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,CAAC,CASlD,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/DropArea.js

@@ -0,0 +1,16 @@
+import { DropContextProvider } from '../context';
+/**
+ * Component that creates a drop area context for its children.
+ * This component establishes a parent-child relationship in the drop target hierarchy.
+ *
+ * @param props - The component props
+ * @returns The rendered drop area with context
+ * @public
+ */
+const DropArea = ({ children, forId, }) => {
+    return (<DropContextProvider value={{ parent: forId }}>
+      {children}
+    </DropContextProvider>);
+};
+export default DropArea;
+//# sourceMappingURL=DropArea.js.map

package/dist/components/DropArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropArea.js","sourceRoot":"","sources":["../../src/components/DropArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAGjD;;;;;;;GAOG;AACH,MAAM,QAAQ,GAAyC,CAAC,EACtD,QAAQ,EACR,KAAK,GACN,EAAE,EAAE;IACH,OAAO,CACL,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAC5C;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAmB,CAAC,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DnDRootView } from './DnDRootView';
+export { default as DropArea } from './DropArea';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { default as DnDRootView } from './DnDRootView';
+export { default as DropArea } from './DropArea';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/constants/index.d.ts

@@ -0,0 +1,15 @@
+import { LayoutRectangle } from 'react-native';
+/**
+ * Initial drag coordinates when no drag operation is active.
+ * @public
+ */
+export declare const initialDragCoords: {
+    x: number;
+    y: number;
+};
+/**
+ * Initial layout rectangle for overlay elements when no drag operation is active.
+ * @public
+ */
+export declare const initialOverLayout: LayoutRectangle;
+//# sourceMappingURL=index.d.ts.map

package/dist/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;CAAiB,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,eAK/B,CAAC"}

package/dist/constants/index.js

@@ -0,0 +1,16 @@
+/**
+ * Initial drag coordinates when no drag operation is active.
+ * @public
+ */
+export const initialDragCoords = { x: 0, y: 0 };
+/**
+ * Initial layout rectangle for overlay elements when no drag operation is active.
+ * @public
+ */
+export const initialOverLayout = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+};
+//# sourceMappingURL=index.js.map

package/dist/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;AAEhD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAoB;IAChD,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;CACV,CAAC"}

package/dist/context/DnDContext.d.ts

@@ -0,0 +1,14 @@
+import { DnDContextType } from '../types';
+/**
+ * React context for drag and drop functionality.
+ * Provides access to the monitor, drag state, and shared values throughout the component tree.
+ * @public
+ */
+declare const DnDContext: import("react").Context<DnDContextType<any, any>>;
+/**
+ * Provider component for the drag and drop context.
+ * @public
+ */
+export declare const DnDContextProvider: import("react").Provider<DnDContextType<any, any>>;
+export default DnDContext;
+//# sourceMappingURL=DnDContext.d.ts.map

package/dist/context/DnDContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DnDContext.d.ts","sourceRoot":"","sources":["../../src/context/DnDContext.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;;;GAIG;AACH,QAAA,MAAM,UAAU,mDAKd,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,oDAAsB,CAAC;AAEtD,eAAe,UAAU,CAAC"}

package/dist/context/DnDContext.js

@@ -0,0 +1,22 @@
+import { createContext } from 'react';
+import { makeMutable } from 'react-native-reanimated';
+import { initialDragCoords, initialOverLayout } from '../constants';
+import { Monitor } from '../monitor';
+/**
+ * React context for drag and drop functionality.
+ * Provides access to the monitor, drag state, and shared values throughout the component tree.
+ * @public
+ */
+const DnDContext = createContext({
+    monitor: new Monitor({ padding: 10 }),
+    isDragging: false,
+    sv: makeMutable(initialDragCoords),
+    svOverLayout: makeMutable(initialOverLayout),
+});
+/**
+ * Provider component for the drag and drop context.
+ * @public
+ */
+export const DnDContextProvider = DnDContext.Provider;
+export default DnDContext;
+//# sourceMappingURL=DnDContext.js.map

package/dist/context/DnDContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DnDContext.js","sourceRoot":"","sources":["../../src/context/DnDContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAGrC;;;;GAIG;AACH,MAAM,UAAU,GAAG,aAAa,CAA2B;IACzD,OAAO,EAAE,IAAI,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;IACrC,UAAU,EAAE,KAAK;IACjB,EAAE,EAAE,WAAW,CAAC,iBAAiB,CAAC;IAClC,YAAY,EAAE,WAAW,CAAC,iBAAiB,CAAC;CAC7C,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAAC,QAAQ,CAAC;AAEtD,eAAe,UAAU,CAAC"}

package/dist/context/DropContext.d.ts

@@ -0,0 +1,17 @@
+/**
+ * React context for drop area hierarchy.
+ * Provides access to the parent drop target ID for establishing parent-child relationships.
+ * @public
+ */
+declare const DropContext: import("react").Context<{
+    parent: number | null;
+}>;
+/**
+ * Provider component for the drop context.
+ * @public
+ */
+export declare const DropContextProvider: import("react").Provider<{
+    parent: number | null;
+}>;
+export default DropContext;
+//# sourceMappingURL=DropContext.d.ts.map

package/dist/context/DropContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropContext.d.ts","sourceRoot":"","sources":["../../src/context/DropContext.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,QAAA,MAAM,WAAW;YAA2B,MAAM,GAAG,IAAI;EAEvD,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,mBAAmB;YARY,MAAM,GAAG,IAAI;EAQF,CAAC;AAExD,eAAe,WAAW,CAAC"}