@vue-dnd-kit/core 1.7.0 → 2.0.0-alpha1

package/README.md

@@ -1,305 +1,5 @@
-# Vue Drag & Drop Library - Core Package
-
-[![Release](https://img.shields.io/badge/status-release-green.svg)](https://github.com/zizigy/vue-dnd-kit)
-
-<p align="center">
-  <a href="https://zizigy.github.io/vue-dnd-kit/">
-    <img src="https://raw.githubusercontent.com/ZiZiGY/vue-dnd-kit/master/public/logo.svg" width="400" alt="Vue Drag & Drop Logo">
-  </a>
-</p>
-
-<p align="center">
-  Core package of the Vue Drag & Drop library with essential hooks and functionality.
-</p>
-
-<p align="center">
-  <a href="https://zizigy.github.io/vue-dnd-kit/" target="_blank">
-    <img src="https://img.shields.io/badge/Documentation-Visit-blue?style=flat-square" alt="Documentation">
-  </a>
-</p>
-
-<p align="center">
-  Inspired by the popular <a href="https://dndkit.com/" target="_blank">React DnD Kit</a> library, adapted for Vue.js
-</p>
-
-## Lightweight & High Performance
-
-Vue DnD Kit is designed to be extremely lightweight while delivering exceptional performance. The library has been optimized for:
-
-- 🚀 **Minimal bundle size** - keep your application fast and responsive
-- ⚡ **Efficient DOM operations** - optimized for handling large lists and complex interactions
-- 🔄 **Smart rendering** - prevents unnecessary re-renders during drag operations
-- 📱 **Smooth experience** - even on mobile and low-powered devices
-
-## Unlimited Flexibility
-
-The library is built with flexibility as a core principle, allowing you to implement virtually any drag and drop scenario:
-
-- 🎯 **Any UI pattern** - sortable lists, kanban boards, calendars, file uploads, and more
-- 🎨 **Any design system** - works with any UI library or custom components
-- 📐 **Any layout** - grid, flex, or custom positioning systems
-- 🔄 **Any interaction model** - simple drag and drop, multi-select, nested containers
-
-## Features
-
-### Core Capabilities
-
-- 🎯 **Simple Composables API**
-
-  - Intuitive hooks-based approach
-  - Clean and declarative syntax
-  - Minimal boilerplate code
-
-- 🎨 **Full Customization**
-
-  - Custom drag overlays
-  - Flexible styling system
-  - Animation support
-  - Custom drag handles
-
-- 📱 **Advanced Input Support**
-
-  - Touch devices support
-  - Mouse events
-  - Multi-touch gestures
-  - **Full keyboard navigation** - complete drag and drop operations using only keyboard
-
-### Accessibility
-
-- ♿ **Keyboard Navigation**
-
-  - Start and control drag operations with keyboard
-  - Arrow keys for movement
-  - Space/Enter for selection and dropping
-  - Escape to cancel drag operations
-  - Tab navigation between draggable elements
-
-- 🔍 **Screen Reader Support**
-
-  - ARIA attributes for drag and drop operations
-  - Descriptive announcements during interactions
-  - Semantic HTML structure
-
-### Performance
-
-- ⚡ **Optimized Rendering**
-
-  - Virtual DOM friendly
-  - Minimal re-renders
-  - Efficient DOM updates
-  - Memory leak prevention
-
-- 🔄 **Smart Auto-scrolling**
-
-  - Smooth scroll animations
-  - Configurable thresholds
-  - Performance-optimized
-  - Works with nested scrollable containers
-
-### Developer Experience
-
-- 🔍 **TypeScript Ready**
-
-  - Full type coverage
-  - Type inference
-  - IDE autocompletion
-  - Type-safe events
-
-- 📐 **Layout Features**
-
-  - Grid system support
-  - Flex layout compatible
-  - Responsive design ready
-  - Dynamic constraints
-
-### Advanced Features
-
-- 🎯 **Smart Grouping**
-
-  - Element groups
-  - Zone filtering
-  - Nested groups
-  - Dynamic group validation
-
-- 📊 **Rich Events System**
-
-  - Comprehensive lifecycle events
-  - Custom event handlers
-  - Drag state tracking
-  - Position coordinates
-
-- 🛡️ **Built-in Utilities**
-
-  - Geometry calculations
-  - Bounding box tracking
-  - Position management
-  - Intersection detection
-
-### Integration
-
-- 🔌 **Framework Integration**
-  - Vue 3 Composition API
-  - Nuxt.js compatible
-  - Works with SSR
-  - Plugin ecosystem ready
-
-## Installation
-
-Choose your preferred package manager:
-
-```bash
-npm install @vue-dnd-kit/core @vueuse/core
-```
-
-```bash
-yarn add @vue-dnd-kit/core @vueuse/core
-```
-
-```bash
-pnpm install @vue-dnd-kit/core @vueuse/core
-```
-
-## Setup as a Plugin
-
-You can register the library as a Vue plugin in your main.ts/js file:
-
-```typescript
-import { createApp } from 'vue';
-import App from './App.vue';
-import VueDnDKitPlugin from '@vue-dnd-kit/core';
-
-const app = createApp(App);
-
-// Register the plugin
-app.use(VueDnDKitPlugin);
-
-app.mount('#app');
-```
-
-This will make all the components and composables globally available in your application.
-
-## Basic Usage
-
-### App.vue
-
-<sup>📄 Root Application Component</sup>
-
-```vue
-<script setup lang="ts">
-  import { ref } from 'vue';
-  import Draggable from './components/Draggable.vue';
-  import Droppable from './components/Droppable.vue';
-
-  const handleDrop = () => (elementInDropZone.value = true);
-
-  const handleEnd = () => (elementInDropZone.value = false);
-
-  const elementInDropZone = ref<boolean>(false);
-</script>
-
-<template>
-  <div>
-    <Draggable v-if="!elementInDropZone"> drag me </Draggable>
-    <Droppable @drop="handleDrop">
-      <Draggable
-        v-if="elementInDropZone"
-        @end="handleEnd"
-      >
-        im in drop zone
-      </Draggable>
-    </Droppable>
-  </div>
-</template>
-```
-
-### Draggable.vue
-
-<sup>🧩 components/Draggable.vue</sup>
-
-```vue
-<script setup lang="ts">
-  import { useDraggable } from '@vue-dnd-kit/core';
-
-  const emit = defineEmits<{
-    (e: 'end'): void;
-  }>();
-
-  const { elementRef, handleDragStart, isDragging } = useDraggable({
-    events: { onEnd: () => emit('end') },
-  });
-</script>
-
-<template>
-  <div
-    ref="elementRef"
-    @pointerdown="handleDragStart"
-    :class="{ dragging: isDragging }"
-    tabindex="0"
-    role="button"
-    aria-grabbed="false"
-    :aria-pressed="isDragging"
-  >
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-  .dragging {
-    opacity: 0.5;
-  }
-</style>
-```
-
-### Droppable.vue
-
-<sup>🧩 components/Droppable.vue</sup>
-
-```vue
-<script setup lang="ts">
-  import { useDroppable } from '@vue-dnd-kit/core';
-
-  const emit = defineEmits<{
-    (e: 'drop'): void;
-  }>();
-
-  const { elementRef, isOvered } = useDroppable({
-    events: { onDrop: () => emit('drop') },
-  });
-</script>
-
-<template>
-  <div
-    ref="elementRef"
-    :class="{
-      droppable: true,
-      'is-overed': isOvered,
-    }"
-    role="region"
-    aria-dropeffect="move"
-  >
-    drop here
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-  .droppable {
-    width: 100px;
-    height: 100px;
-    border: 1px solid black;
-  }
-  .is-overed {
-    background-color: #f0f0f0;
-    border: 1px dashed red;
-  }
-</style>
-```
-
-## 📄 License
-
-[MIT](LICENSE) © [ZiZiGY](https://github.com/ZiZiGY)
-
----
-
-<p align="center">🎉 Congratulations on the official release! 🎉</p>
-<p align="center">Made with ❤️ for the Vue.js community</p>
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

package/dist/core.css

@@ -0,0 +1 @@
+.dnd-kit-default-overlay{transform:translate3d(var(--position-x),var(--position-y),0)}pre{position:fixed;top:0;right:0;height:100svh;overflow:auto}.dnd-kit-overlay-container{position:fixed;top:0;left:0;pointer-events:none;cursor:grabbing}

package/dist/external/components/DefaultOverlay.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=DefaultOverlay.vue.d.ts.map

package/dist/external/components/DefaultOverlay.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultOverlay.vue.d.ts","sourceRoot":"","sources":["../../../src/external/components/DefaultOverlay.vue"],"names":[],"mappings":";AA2HA,wBAKG"}

package/dist/external/components/DnDProvider.vue.d.ts

@@ -0,0 +1,25 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        overlay?(_: {
+            overlay: import('vue').Component;
+        }): any;
+    };
+    refs: {
+        overlayRef: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    overlayRef: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=DnDProvider.vue.d.ts.map

package/dist/external/components/DnDProvider.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DnDProvider.vue.d.ts","sourceRoot":"","sources":["../../../src/external/components/DnDProvider.vue"],"names":[],"mappings":"AA0EA,iBAAS,cAAc;WAwCT,OAAO,IAA6B;;yBAZrB,GAAG;;;YACH,GAAG;;;;;;EAgB/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;OAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/external/composables/makeBoundingBox.d.ts

@@ -0,0 +1,8 @@
+import { TDnDNodeRef, TDragAxis } from '../types';
+import { Ref } from 'vue';
+export interface IMakeBoundingBoxOptions {
+    axis?: TDragAxis | Ref<TDragAxis>;
+    restrictToArea?: boolean | Ref<boolean>;
+}
+export declare function makeBoundingBox(ref: TDnDNodeRef, options?: IMakeBoundingBoxOptions): {};
+//# sourceMappingURL=makeBoundingBox.d.ts.map

package/dist/external/composables/makeBoundingBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeBoundingBox.d.ts","sourceRoot":"","sources":["../../../src/external/composables/makeBoundingBox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,WAAW,EACX,SAAS,EACV,MAAM,UAAU,CAAC;AAClB,OAAO,EAAsC,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAInE,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC;CACzC;AAED,wBAAgB,eAAe,CAC7B,GAAG,EAAE,WAAW,EAChB,OAAO,CAAC,EAAE,uBAAuB,MAwBlC"}

package/dist/external/composables/makeCustomOverlay.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=makeCustomOverlay.d.ts.map

package/dist/external/composables/makeCustomOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeCustomOverlay.d.ts","sourceRoot":"","sources":["../../../src/external/composables/makeCustomOverlay.ts"],"names":[],"mappings":""}

package/dist/external/composables/makeDraggable.d.ts

@@ -0,0 +1,17 @@
+import { IBaseOptions, IDragActivationOptions, IDraggableEvents, IModifierOptions, IPlacementMargins, TDnDNodeRef, TDraggablePayload } from '../types';
+import { Component, Ref } from 'vue';
+interface IMakeDraggableOptions extends IBaseOptions {
+    events?: IDraggableEvents;
+    modifier?: IModifierOptions;
+    render?: Component;
+    dragHandle?: string | Ref<string>;
+    activation?: IDragActivationOptions;
+    /** Margins for center zone. When pointer in center and element is also droppable, zone mode is used. */
+    placementMargins?: IPlacementMargins;
+}
+interface IMakeDraggableReturnType {
+}
+export declare function makeDraggable(ref: TDnDNodeRef, payload?: TDraggablePayload): IMakeDraggableReturnType;
+export declare function makeDraggable(ref: TDnDNodeRef, options: IMakeDraggableOptions, payload?: TDraggablePayload): IMakeDraggableReturnType;
+export {};
+//# sourceMappingURL=makeDraggable.d.ts.map

package/dist/external/composables/makeDraggable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeDraggable.d.ts","sourceRoot":"","sources":["../../../src/external/composables/makeDraggable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EAEZ,sBAAsB,EACtB,gBAAgB,EAEhB,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,iBAAiB,EAClB,MAAM,UAAU,CAAC;AAClB,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAM3E,UAAU,qBAAsB,SAAQ,YAAY;IAClD,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,wGAAwG;IACxG,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;CACtC;AAED,UAAU,wBAAwB;CAAG;AAErC,wBAAgB,aAAa,CAC3B,GAAG,EAAE,WAAW,EAChB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,wBAAwB,CAAC;AAC5B,wBAAgB,aAAa,CAC3B,GAAG,EAAE,WAAW,EAChB,OAAO,EAAE,qBAAqB,EAC9B,OAAO,CAAC,EAAE,iBAAiB,GAC1B,wBAAwB,CAAC"}

package/dist/external/composables/makeDroppable.d.ts

@@ -0,0 +1,7 @@
+import { IBaseOptions, IDroppableEvents, TDnDNodeRef } from '../types';
+interface IMakeDroppableOptions extends IBaseOptions {
+    events?: IDroppableEvents;
+}
+export declare function makeDroppable(ref: TDnDNodeRef, options?: IMakeDroppableOptions): void;
+export {};
+//# sourceMappingURL=makeDroppable.d.ts.map

package/dist/external/composables/makeDroppable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeDroppable.d.ts","sourceRoot":"","sources":["../../../src/external/composables/makeDroppable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAO5E,UAAU,qBAAsB,SAAQ,YAAY;IAClD,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,WAAW,EAAE,OAAO,GAAE,qBAA0B,GAAG,IAAI,CAyBzF"}

package/dist/external/composables/makeSelectableArea.d.ts

@@ -0,0 +1,15 @@
+import { Ref } from 'vue';
+import { IBaseOptions, ISelectableAreaEvents, TDnDNodeRef, TModifierKeys, TModifierMethod } from '../types';
+interface ISelectableAreaOptions extends IBaseOptions {
+    modifier?: {
+        keys: TModifierKeys | Ref<TModifierKeys>;
+        method: TModifierMethod | Ref<TModifierMethod>;
+    };
+    events?: ISelectableAreaEvents;
+}
+export declare const makeSelectableArea: (nodeRef: TDnDNodeRef, options?: ISelectableAreaOptions) => {
+    isSelecting: import('vue').ComputedRef<boolean>;
+    style: import('vue').ComputedRef<import('vue').CSSProperties>;
+};
+export {};
+//# sourceMappingURL=makeSelectableArea.d.ts.map

package/dist/external/composables/makeSelectableArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeSelectableArea.d.ts","sourceRoot":"","sources":["../../../src/external/composables/makeSelectableArea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAItE,OAAO,KAAK,EACV,YAAY,EAEZ,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,eAAe,EAChB,MAAM,UAAU,CAAC;AAIlB,UAAU,sBAAuB,SAAQ,YAAY;IACnD,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,aAAa,GAAG,GAAG,CAAC,aAAa,CAAC,CAAC;QACzC,MAAM,EAAE,eAAe,GAAG,GAAG,CAAC,eAAe,CAAC,CAAC;KAChD,CAAC;IACF,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAED,eAAO,MAAM,kBAAkB,GAC7B,SAAS,WAAW,EACpB,UAAU,sBAAsB;;;CAoDjC,CAAC"}

package/dist/external/composables/useDnDProvider.d.ts

@@ -0,0 +1,3 @@
+import { IDnDProviderExternal } from '../types';
+export declare const useDnDProvider: () => IDnDProviderExternal;
+//# sourceMappingURL=useDnDProvider.d.ts.map

package/dist/external/composables/useDnDProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDnDProvider.d.ts","sourceRoot":"","sources":["../../../src/external/composables/useDnDProvider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAGrD,eAAO,MAAM,cAAc,QAAO,oBAejC,CAAC"}

package/dist/external/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Public API (external)
+ * Re-exports from internal for future package consumers
+ */
+export { default as DnDProvider } from './components/DnDProvider.vue';
+export { makeDraggable } from './composables/makeDraggable';
+export { makeSelectableArea } from './composables/makeSelectableArea';
+export { makeBoundingBox } from './composables/makeBoundingBox';
+export { makeDroppable } from './composables/makeDroppable';
+export { useDnDProvider } from './composables/useDnDProvider';
+export type * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/external/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,mBAAmB,SAAS,CAAC"}

package/dist/external/types/entities.d.ts

@@ -0,0 +1,144 @@
+import { ComponentPublicInstance, ComputedRef, Ref } from 'vue';
+import { IPlacementMargins } from './placement';
+import { IDragEvent } from './provider';
+export type TDnDNode = HTMLElement | ComponentPublicInstance | null;
+export type TDnDNodeRef = Readonly<Ref<TDnDNode>>;
+export type TDragAxis = 'x' | 'y' | 'both';
+export type TDraggablePayload<T = any, D = any> = () => [number, T[], D?];
+
+/** Resolved payload from TDraggablePayload (index + items + optional dropData) */
+export interface IDragPayload<T = unknown, D = unknown> {
+  index: number;
+  items: T[];
+  dropData?: D;
+}
+
+export interface IBaseOptions {
+  disabled?: boolean | Ref<boolean>;
+  groups?: string[] | Ref<string[]>;
+}
+
+export interface IBaseEntity {
+  disabled?: boolean;
+  groups?: string[];
+}
+
+export interface IEntities {
+  draggableMap: Map<HTMLElement, IDraggableEntity>;
+  droppableMap: Map<HTMLElement, IDroppableEntity>;
+
+  selectingArea?: HTMLElement;
+  initiatingDraggable?: HTMLElement;
+
+  selectableAreaMap: Map<HTMLElement, ISelectableAreaEntity>;
+  constraintsAreaMap: Map<HTMLElement, IConstraintsAreaEntity>;
+
+  draggingMap: Map<HTMLElement, IDraggingEntity>;
+  selectedSet: Set<HTMLElement>;
+
+  modifiersDraggableSet: ComputedRef<Set<HTMLElement>>;
+  modifiersSelectableAreaSet: ComputedRef<Set<HTMLElement>>;
+
+  visibleDraggableSet: Set<HTMLElement>;
+  visibleDroppableSet: Set<HTMLElement>;
+  visibleSelectableAreaSet: Set<HTMLElement>;
+}
+
+export type TModifierMethod = 'every' | 'some';
+export type TModifierKeys = string[];
+
+export interface IModifier {
+  keys: TModifierKeys;
+  method: TModifierMethod;
+}
+
+export interface IModifierOptions {
+  keys: TModifierKeys | Ref<TModifierKeys>;
+  method: TModifierMethod | Ref<TModifierMethod>;
+}
+
+export interface ISelectableAreaEvents {
+  /** Called when selection ends (pointer up) with selected elements */
+  onSelected?: (selected: HTMLElement[]) => void;
+}
+
+export interface ISelectableAreaEntity extends IBaseEntity {
+  modifier: IModifier;
+  events?: ISelectableAreaEvents;
+}
+
+export interface IConstraintsAreaEntity {
+  axis?: TDragAxis;
+  restrictToArea?: boolean;
+}
+
+export interface IDraggableEvents {
+  /** Dragged element(s) — identifies which element is being dragged */
+  onSelfDragStart?: (event: IDragEvent) => void;
+  onSelfDragMove?: (event: IDragEvent) => void;
+  onSelfDragEnd?: (event: IDragEvent) => void;
+  onSelfDragCancel?: (event: IDragEvent) => void;
+
+  /** Element under cursor during drag — when another element is dragged over this one */
+  onDragStart?: (event: IDragEvent) => void;
+  onDragMove?: (event: IDragEvent) => void;
+  onDragEnd?: (event: IDragEvent) => void;
+  onDragCancel?: (event: IDragEvent) => void;
+
+  /** Alias / shortcut: cursor enters this draggable during drag */
+  onHover?: (event: IDragEvent) => void;
+  /** Cursor leaves this draggable during drag */
+  onLeave?: (event: IDragEvent) => void;
+}
+
+export interface IDroppableEvents {
+  onEnter?: (event: IDragEvent) => void;
+  onDrop?: (event: IDragEvent) => void | Promise<void>;
+  onLeave?: (event: IDragEvent) => void;
+}
+
+export interface IDragActivationOptions {
+  distance?:
+    | {
+        x?: number | Ref<number>;
+        y?: number | Ref<number>;
+        condition?: TCondition | Ref<TCondition>;
+      }
+    | number
+    | Ref<number>;
+  delay?: number | Ref<number>;
+}
+
+export interface IDragActivation {
+  distance?:
+    | {
+        x?: number;
+        y?: number;
+        condition?: TCondition;
+      }
+    | number;
+  delay?: number;
+  condition?: TCondition;
+}
+
+export type TCondition = 'any' | 'both';
+
+export interface IDraggableEntity extends IBaseEntity {
+  render?: Component;
+  events?: IDraggableEvents;
+  payload?: TDraggablePayload;
+  modifier?: IModifier;
+  dragHandle?: string;
+  activation?: IDragActivation;
+  /** Margins for center zone. When pointer in center and element is also droppable, zone mode is used. */
+  placementMargins?: IPlacementMargins;
+}
+
+export interface IDraggingEntity extends IDraggableEntity {
+  initialHTML: string;
+  initialRect: DOMRect;
+}
+
+export interface IDroppableEntity extends IBaseEntity {
+  events?: IDroppableEvents;
+}

package/dist/external/types/index.d.ts

@@ -0,0 +1,4 @@
+export type * from './pointer';
+export type * from './provider';
+export type * from './placement';
+export type * from './entities'

package/dist/external/types/placement.d.ts

@@ -0,0 +1,15 @@
+export interface IPlacement {
+  top: boolean;
+  right: boolean;
+  bottom: boolean;
+  left: boolean;
+  /** True when pointer is in center zone (inside placementMargins). Used for dual-role draggable+zone. */
+  center?: boolean;
+}
+
+export interface IPlacementMargins {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}

package/dist/external/types/pointer.d.ts

@@ -0,0 +1,10 @@
+export interface ICoordinates {
+  x: number;
+  y: number;
+}
+
+export type TPointerState = {
+  start: ICoordinates;
+  current: ICoordinates;
+  offset: ICoordinates;
+} | undefined | null