@octane-xplat/dnd-kit 0.0.1 → 0.11.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Alec Larson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -1,4 +1,308 @@
 # @octane-xplat/dnd-kit
 
-This is a placeholder stub published to reserve the package name ahead of the
-first automated release. It has no supported API.
+Use draggable and droppable Xplat Views on web, iOS, Android, and native macOS (AppKit). The leaf shares
+`@dnd-kit/abstract`'s manager, sensor interface, and drag state machine plus
+`@dnd-kit/collision` algorithms and `@dnd-kit/state` reactivity. It implements
+input and geometry through Xplat primitives; it does not load `@dnd-kit/dom`
+on native or use a collection widget's reorder mechanism. This is an Xplat
+facade, not a drop-in replacement for the upstream hook signatures.
+
+## Install and reorder
+
+In an Octane Xplat app with `@octane-xplat/ui` and its renderer configured:
+
+```sh
+pnpm add @octane-xplat/dnd-kit
+```
+
+Import from the root package; web/native/macos export conditions select the platform
+implementation. The app keeps one Octane runtime. Native apps also need the
+existing `@nativescript-community/octane` and `@nativescript/core` setup.
+The AppKit entry ships source, like other macOS leaves; include its `src/**/*.tsx`
+and `src/**/*.tsrx` in the macOS renderer transform. The workspace config already
+includes these paths. Its entry supplies AbortController/AbortSignal when absent
+in JavaScriptCore. macOS WebView apps select the web entry instead.
+No leaf CSS build is required; drag feedback uses style objects.
+
+```tsx
+import { useState } from 'octane'
+import { Text } from '@octane-xplat/ui'
+import { SortableList } from '@octane-xplat/dnd-kit'
+
+export function Tasks() {
+	const [items, setItems] = useState(['alpha', 'beta', 'gamma'])
+	return (
+		<SortableList
+			items={items}
+			onReorder={setItems}
+			renderItem={(id) => <Text>{String(id)}</Text>}
+		/>
+	)
+}
+```
+
+Use `.tsx`/`.tsrx` files inside the app's renderer include globs. IDs must be
+stable and unique within a context. `SortableList` creates its own DndContext
+and commits a new array only on a successful drop over a different list item.
+The caller saves that array. Cancellation, release outside a target, and drops
+onto a disabled target leave the order unchanged. The maintained
+[example](examples/sortable.tsx) displays the committed order above the rows.
+
+```tsx
+// Tasks above owns items; successful drops publish a replacement array.
+export function EmptyTasks() {
+	const [items, setItems] = useState<string[]>([])
+	return <SortableList items={items} onReorder={setItems} renderItem={(id) => <Text>{id}</Text>} />
+}
+```
+
+## Compose drag and drop
+
+Use `DndContext` around cooperating children. A draggable spreads `ref`,
+`onPan`, and `style` onto **one View**; a droppable supplies its `ref`. `ref`
+is the Xplat View binding callback, not a DOM ref prop. `useMeasure` observes
+layout; live geometry is read again during drag and auto-scroll.
+
+```tsx
+import { View, Text } from '@octane-xplat/ui'
+import { DndContext, useDraggable, useDroppable } from '@octane-xplat/dnd-kit'
+
+function Card() {
+	const drag = useDraggable({ id: 'card', data: { container: 'inbox' } })
+	return (
+		<View ref={drag.ref} onPan={drag.onPan} style={drag.style}>
+			<Text>Move me</Text>
+		</View>
+	)
+}
+function Target() {
+	const drop = useDroppable({ id: 'done' })
+	return (
+		<View ref={drop.ref} className="drop-target">
+			<Text>{drop.isOver ? 'Release here' : 'Done'}</Text>
+		</View>
+	)
+}
+export function Board() {
+	return (
+		<DndContext
+			onDragEnd={({ active, over }) => {
+				if (active && over) console.log(active.id, over.id)
+			}}
+		>
+			<Card />
+			<Target />
+		</DndContext>
+	)
+}
+```
+
+```css
+.drop-target {
+	min-height: 100px;
+}
+```
+
+`useDndContext()` subscribes each reader and returns `active`, `over`,
+`transform`, and `isDragging`. Event callbacks are `onDragStart`, `onDragMove`,
+`onDragOver`, `onDragEnd`, and `onDragCancel`; events add `canceled`.
+`onDragEnd` fires only for a completed gesture; check `over` before accepting it.
+Set `disabled` on either hook to exclude it. Droppable `accept(source)` can
+filter by source data. Unmounting or disabling an active draggable cancels it;
+unmounting a target removes it from collision detection. Context disposal
+cleans registrations, subscriptions, queued input, and auto-scroll timers.
+
+```tsx
+import { Text, View } from '@octane-xplat/ui'
+import { useDndContext, useDroppable } from '@octane-xplat/dnd-kit'
+
+// Render inside the Board's DndContext above.
+export function Inbox() {
+	const context = useDndContext()
+	const drop = useDroppable({
+		id: 'inbox',
+		disabled: false,
+		accept: (source) => source.data.container === 'inbox',
+	})
+	return (
+		<View ref={drop.ref} className="drop-target">
+			<Text>{context.isDragging ? 'Dragging' : 'Ready'}</Text>
+		</View>
+	)
+}
+```
+
+The default detector prefers pointer intersection then shape overlap. Supply
+`collisionDetection={closestCenter}` to choose another exported algorithm.
+The pan facade uses the dragged View's center as its detection position; it
+does not preserve the finger's grab offset. A draggable's own ID is excluded
+from drop targets. `SortableContext` declares
+item membership for `useSortable`, which combines both hooks; use `arrayMove`
+in `onDragEnd` to save an order. Items do not shift to preview their destination
+before release; the dragged View translates over the stationary rows.
+
+```tsx
+import { useState } from 'octane'
+import { Text, View } from '@octane-xplat/ui'
+import {
+	DndContext,
+	SortableContext,
+	useSortable,
+	closestCenter,
+	arrayMove,
+} from '@octane-xplat/dnd-kit'
+
+function SortableRow({ id }: { id: string }) {
+	const drag = useSortable({ id })
+	return (
+		<View ref={drag.ref} onPan={drag.onPan} style={drag.style}>
+			<Text>{id}</Text>
+		</View>
+	)
+}
+export function OrderedTasks() {
+	const [items, setItems] = useState(['alpha', 'beta'])
+	return (
+		<DndContext
+			collisionDetection={closestCenter}
+			onDragEnd={({ active, over }) => {
+				if (!active || !over) return
+				const from = items.indexOf(String(active.id))
+				const to = items.indexOf(String(over.id))
+				if (from >= 0 && to >= 0) setItems(arrayMove(items, from, to))
+			}}
+		>
+			<SortableContext items={items}>
+				{items.map((id) => (
+					<SortableRow id={id} />
+				))}
+			</SortableContext>
+		</DndContext>
+	)
+}
+```
+
+Cross-container drops work within one DndContext: `active.data` and `over.data`
+can identify containers. The caller moves data between its arrays at drop time.
+Separate `SortableList` instances each own a context; use the hooks and
+`SortableContext` for a board with cooperating lists. Automatic transfer,
+placeholder layout, and empty-container insertion are not built in.
+
+```ts
+// Add to a cooperating Board's DndContext; app arrays own the transfer.
+function recordTransfer(event: import('@octane-xplat/dnd-kit').DragEvent) {
+	if (event.active && event.over) {
+		console.log(event.active.data.container, event.over.data.container)
+	}
+}
+```
+
+## Auto-scroll
+
+Pass `autoScroll` to DndContext, or `dnd={{ autoScroll }}` to SortableList.
+The adapter makes the existing scroll owner explicit:
+
+```ts
+import type { AutoScroll } from '@octane-xplat/dnd-kit'
+
+// Supply these live callbacks from the scroll owner in your app.
+export function scrollAdapter(owner: {
+	bounds: AutoScroll['bounds']
+	offsetRef: { current: number }
+	maxOffset: () => number
+	scrollTo: (offset: number) => void
+}): AutoScroll {
+	return {
+		bounds: owner.bounds,
+		offsetRef: owner.offsetRef,
+		maxOffset: owner.maxOffset,
+		scrollTo: (offset) => {
+			const applied = Math.max(0, Math.min(owner.maxOffset(), offset))
+			owner.offsetRef.current = applied
+			owner.scrollTo(applied)
+		},
+		axis: 'y',
+		threshold: 40,
+		speed: 12,
+	}
+}
+```
+
+`owner.bounds()` returns the current measured `{ x, y, width, height }` or null;
+`offsetRef` is the scroll owner's `{ current: number }`. `owner.scrollTo`
+stands for the owner's existing scroll method. Read current offsets into the
+ref on ordinary scroll events, following VirtualList's scrollOffsetRef pattern.
+On native, use a View's `getLocationOnScreen` and `getActualSize` or `useMeasure`
+for viewport bounds; on web use the corresponding measured viewport bounds.
+Keep bounds and offsets in the same coordinate units: native DIPs, web CSS pixels,
+and AppKit points. AppKit geometry uses top-left window-content coordinates.
+The [macOS example](examples/sortable.macos.tsx) owns an NSScrollView, measures its
+clip view, and converts its document offset into top-down points. It initializes
+at the document top and handles flipped and unflipped document views.
+
+```ts
+// Keep the scroll owner's offset ref in sync with ordinary scrolling too.
+function recordScroll(offsetRef: { current: number }, offset: number) {
+	offsetRef.current = offset
+}
+```
+
+The adapter must clamp and update the ref synchronously to the applied offset.
+The drag loop scrolls every 16ms while the drag center remains inside the viewport
+and near an edge. `threshold` is the edge distance; `speed` is the maximum units
+per tick. It remeasures drop targets and compensates the dragged View's visual
+translation for scrolling. Scrolling stops on drop, cancel, and disposal.
+Only one explicit scroll viewport is supported; do not attach another gesture
+handler to the same drag View.
+
+```tsx
+// Continue with scrollAdapter above and your app's existing scroll owner.
+import { SortableList, type AutoScroll } from '@octane-xplat/dnd-kit'
+import { Text } from '@octane-xplat/ui'
+
+export function ScrollingTasks({ autoScroll }: { autoScroll: AutoScroll }) {
+	const [items, setItems] = useState(['alpha', 'beta'])
+	return (
+		<SortableList
+			items={items}
+			onReorder={setItems}
+			dnd={{ autoScroll }}
+			renderItem={(id) => <Text>{id}</Text>}
+		/>
+	)
+}
+```
+
+## Limits and verification
+
+V1 uses pan input immediately on native gesture begin or web pointer-down.
+There is no activation distance, separate handle, keyboard sensor, screen-reader
+announcement layer, drag overlay, nested-scroll arbitration, or virtualized
+offscreen target discovery. Native pans may compete with ScrollView gestures;
+OS gesture arbitration and hit-testing require device verification. Only mounted,
+measurable targets participate. Use a separate DndContext in each native renderer
+root (pages and sheets do not share context).
+
+Run `pnpm --filter @octane-xplat/dnd-kit typecheck`, `test`, `build`, and
+`pack:check`. Core tests use native-shaped geometry and the real abstract core;
+they do not establish OS input delivery. The repository probe doctor reports
+available runtime targets. Do not infer Android runtime support from a native
+library build.
+The Web regression runs with `pnpm --filter @xplat/web test`; it drives pointer
+events through bound Views and checks both successful drop and cancellation.
+The maintained AppKit regression runs with
+`pnpm probe run packages/dnd-kit/tests/appkit-scroll.macos.tsrx --target macos`; it uses
+action dispatch and checks layer feedback, layout, auto-scroll, and cleanup.
+
+Before the first automated release, the package still needs the one-time npm
+stub and trusted publisher setup described in [releases](../../.agents/docs/releases.md).
+This change does not publish or configure npm.
+
+Verification: web/native/macOS source typechecks, web/native library builds,
+ten core/geometry tests, and packed consumers in Bundler/NodeNext passed.
+Chromium pointer-event dispatch and iOS pan-observer dispatch probes passed
+for reorder and cancellation. AppKit/JavaScriptCore pan-handler dispatch passed
+reorder/cancel plus NSScrollView auto-scroll, translation through layout, and
+cancellation cleanup. These establish renderer runtime behavior, not OS gesture
+delivery, hit-testing, or scroll gesture arbitration. Android runtime and macOS
+WebView drag behavior were not run.

package/dist/native/components.js

@@ -0,0 +1,275 @@
+import { dragStyle } from "./geometry.js";
+import { DndController } from "./controller.js";
+import { arrayMove } from "./sort.js";
+import { createContext, defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalContext, universalPlan, universalProps, universalValue, useCallback, useContext, useEffect, useRef, useSyncExternalStore, withSlot } from "@nativescript-community/octane";
+import { View, useMeasure } from "@octane-xplat/ui";
+//#region src/components.tsx
+var _hs$ = /* @__PURE__ */ hookSlots(27);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
+var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
+var _h$11 = /* @__PURE__ */ Symbol(_hs$ + 11);
+var _h$12 = /* @__PURE__ */ Symbol(_hs$ + 12);
+var _h$13 = /* @__PURE__ */ Symbol(_hs$ + 13);
+var _h$14 = /* @__PURE__ */ Symbol(_hs$ + 14);
+var _h$15 = /* @__PURE__ */ Symbol(_hs$ + 15);
+var _h$16 = /* @__PURE__ */ Symbol(_hs$ + 16);
+var _h$17 = /* @__PURE__ */ Symbol(_hs$ + 17);
+var _h$18 = /* @__PURE__ */ Symbol(_hs$ + 18);
+var _h$19 = /* @__PURE__ */ Symbol(_hs$ + 19);
+var _h$20 = /* @__PURE__ */ Symbol(_hs$ + 20);
+var _h$21 = /* @__PURE__ */ Symbol(_hs$ + 21);
+var _h$22 = /* @__PURE__ */ Symbol(_hs$ + 22);
+var _h$23 = /* @__PURE__ */ Symbol(_hs$ + 23);
+var _h$24 = /* @__PURE__ */ Symbol(_hs$ + 24);
+var _h$25 = /* @__PURE__ */ Symbol(_hs$ + 25);
+var _h$26 = /* @__PURE__ */ Symbol(_hs$ + 26);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var Context = createContext(null);
+var ContextProvider = Context;
+var SortContext = createContext(null);
+var SortContextProvider = SortContext;
+var DndContext = defineUniversalComponent("nativescript", function DndContext(props) {
+	const ref = useRef(null, _h$0);
+	if (!ref.current) ref.current = new DndController();
+	const controller = ref.current;
+	controller.options = props;
+	useEffect(() => () => controller.disposeController(), [controller], _h$1);
+	return universalValue(__octaneUniversalPlan0, [((__octaneContextProps) => universalContext(ContextProvider, __octaneContextProps.value, props.children))({ "value": controller })]);
+}, { "module": "@nativescript-community/octane" });
+function useController() {
+	const controller = useContext(Context);
+	if (!controller) throw new Error("Drag and drop hooks require DndContext");
+	return controller;
+}
+function useDndContext() {
+	const controller = withSlot(_h$2, useController);
+	return useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot, _h$3);
+}
+function useDraggable(options) {
+	const controller = withSlot(_h$4, useController);
+	const snapshot = withSlot(_h$5, useDndContext);
+	const entity = useRef(null, _h$6);
+	const node = useRef(null, _h$7);
+	const latest = useRef(options, _h$8);
+	latest.current = options;
+	const measurement = withSlot(_h$9, useMeasure);
+	useEffect(() => {
+		const registered = controller.registerDraggable(latest.current);
+		entity.current = registered;
+		if (node.current) controller.draggableNodes.set(options.id, node.current);
+		return () => {
+			if (controller.getSnapshot().active?.id === options.id) controller.cancel();
+			registered.destroy();
+			entity.current = null;
+			controller.draggableNodes.delete(options.id);
+		};
+	}, [controller, options.id], _h$10);
+	useEffect(() => {
+		if (!entity.current) return;
+		entity.current.data = options.data ?? {};
+		entity.current.disabled = options.disabled ?? false;
+		if (options.disabled && controller.getSnapshot().active?.id === options.id) controller.cancel();
+	}, [
+		controller,
+		options.id,
+		options.data,
+		options.disabled
+	], _h$11);
+	const ref = useCallback((element) => {
+		node.current = element;
+		measurement.ref(element);
+		if (element) controller.draggableNodes.set(options.id, element);
+		else controller.draggableNodes.delete(options.id);
+	}, [
+		controller,
+		options.id,
+		measurement.ref
+	], _h$12);
+	const onPan = useCallback((event) => entity.current?.onPan?.(event), [], _h$13);
+	const isDragging = snapshot.isDragging && snapshot.active?.id === options.id;
+	const transform = isDragging ? snapshot.transform : {
+		x: 0,
+		y: 0
+	};
+	return {
+		ref,
+		onPan,
+		isDragging,
+		transform,
+		style: dragStyle(transform.x, transform.y)
+	};
+}
+function useDroppable(options) {
+	const controller = withSlot(_h$14, useController);
+	const snapshot = withSlot(_h$15, useDndContext);
+	const entity = useRef(null, _h$16);
+	const node = useRef(null, _h$17);
+	const latest = useRef(options, _h$18);
+	latest.current = options;
+	const measurement = withSlot(_h$19, useMeasure);
+	useEffect(() => {
+		const registered = controller.registerDroppable(latest.current);
+		entity.current = registered;
+		if (node.current) controller.droppableNodes.set(options.id, node.current);
+		controller.refresh();
+		return () => {
+			registered.destroy();
+			entity.current = null;
+			controller.droppableNodes.delete(options.id);
+			controller.refresh();
+		};
+	}, [controller, options.id], _h$20);
+	useEffect(() => {
+		if (!entity.current) return;
+		entity.current.data = options.data ?? {};
+		entity.current.disabled = options.disabled ?? false;
+		entity.current.accept = options.accept ? (source) => options.accept({
+			id: source.id,
+			data: source.data
+		}) : void 0;
+		controller.refresh();
+	}, [
+		controller,
+		options.data,
+		options.disabled,
+		options.accept,
+		controller.options.collisionDetection,
+		measurement.bounds
+	], _h$21);
+	return {
+		ref: useCallback((element) => {
+			node.current = element;
+			measurement.ref(element);
+			if (element) controller.droppableNodes.set(options.id, element);
+			else controller.droppableNodes.delete(options.id);
+		}, [
+			controller,
+			options.id,
+			measurement.ref
+		], _h$22),
+		isOver: snapshot.isDragging && snapshot.over?.id === options.id
+	};
+}
+var SortableContext = defineUniversalComponent("nativescript", function SortableContext(props) {
+	if (new Set(props.items).size !== props.items.length) throw new Error("SortableContext requires unique item ids");
+	return universalValue(__octaneUniversalPlan1, [((__octaneContextProps) => universalContext(SortContextProvider, __octaneContextProps.value, props.children))({ "value": props.items })]);
+}, { "module": "@nativescript-community/octane" });
+function useSortable(options) {
+	if (!useContext(SortContext)?.includes(options.id)) throw new Error("useSortable requires membership in SortableContext");
+	const drag = withSlot(_h$23, useDraggable, options);
+	const drop = withSlot(_h$24, useDroppable, options);
+	const ref = useCallback((element) => {
+		drag.ref(element);
+		drop.ref(element);
+	}, [drag.ref, drop.ref], _h$25);
+	return {
+		...drag,
+		ref,
+		isOver: drop.isOver
+	};
+}
+var SortableRow = defineUniversalComponent("nativescript", function SortableRow(props) {
+	const sortable = withSlot(_h$26, useSortable, {
+		id: props.id,
+		disabled: props.list.disabled
+	});
+	return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", View, universalProps([
+		[
+			"set",
+			"ref",
+			sortable.ref
+		],
+		[
+			"set",
+			"onPan",
+			sortable.onPan
+		],
+		[
+			"set",
+			"style",
+			sortable.style
+		]
+	], props.list.renderItem(props.id, props.index)))]);
+}, { "module": "@nativescript-community/octane" });
+var SortableList = defineUniversalComponent("nativescript", function SortableList(props) {
+	const { items, renderItem: _renderItem, onReorder, disabled: _disabled, dnd, ...viewProps } = props;
+	return universalValue(__octaneUniversalPlan6, [universalComponent("nativescript", DndContext, universalProps([["spread", dnd], [
+		"set",
+		"onDragEnd",
+		(event) => {
+			if (event.active && event.over) {
+				const from = items.findIndex((id) => id === event.active.id);
+				const to = items.findIndex((id) => id === event.over.id);
+				if (from >= 0 && to >= 0 && from !== to) onReorder(arrayMove(items, from, to), event);
+			}
+			dnd?.onDragEnd?.(event);
+		}
+	]], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan5, [universalComponent("nativescript", SortableContext, universalProps([[
+			"set",
+			"items",
+			items
+		]], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan4, [universalComponent("nativescript", View, universalProps([["spread", viewProps]], items.map((id, index) => universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", SortableRow, universalProps([
+				[
+					"set",
+					"key",
+					id
+				],
+				[
+					"set",
+					"id",
+					id
+				],
+				[
+					"set",
+					"index",
+					index
+				],
+				[
+					"set",
+					"list",
+					props
+				]
+			]))]))))]);
+		})))]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { DndContext, SortableContext, SortableList, useDndContext, useDraggable, useDroppable, useSortable };