@octanejs/dnd-kit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dominic Gannaway
+
+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

@@ -0,0 +1,44 @@
+# `@octanejs/dnd-kit`
+
+The modern dnd-kit React adapter ported to octane. It reuses dnd-kit's
+framework-agnostic `@dnd-kit/dom` implementation, so sensors, collision
+detection, modifiers, accessibility, feedback, and sortable mechanics stay
+on the official upstream core.
+
+```tsrx
+import { DragDropProvider } from '@octanejs/dnd-kit';
+import { useSortable } from '@octanejs/dnd-kit/sortable';
+import { arrayMove } from '@dnd-kit/helpers';
+import { useState } from 'octane';
+
+function Item(props) @{
+  const { ref, isDragging } = useSortable({ id: props.id, index: props.index });
+  <button ref={ref} data-dragging={isDragging}>{props.id as string}</button>
+}
+
+export function App() @{
+  const [items, setItems] = useState(['a', 'b', 'c']);
+  <DragDropProvider
+    onDragEnd={(event) => {
+      if (event.canceled || !event.operation.target) return;
+      const from = items.indexOf(event.operation.source.id as string);
+      const to = items.indexOf(event.operation.target.id as string);
+      setItems(arrayMove(items, from, to));
+    }}
+  >
+    @for (const id of items; key id) {
+      <Item id={id} index={items.indexOf(id)} />
+    }
+  </DragDropProvider>
+}
+```
+
+The public entry points mirror `@dnd-kit/react@0.5.0`:
+
+- `@octanejs/dnd-kit`
+- `@octanejs/dnd-kit/hooks`
+- `@octanejs/dnd-kit/sortable`
+- `@octanejs/dnd-kit/utilities`
+
+This package targets the modern dnd-kit API. The legacy `@dnd-kit/core` 6.x
+API is not included.

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@octanejs/dnd-kit",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "octane": {
+    "hookSlots": {
+      "manual": [
+        "src"
+      ]
+    }
+  },
+  "description": "dnd-kit bindings for the octane renderer — a full port of the modern @dnd-kit/react adapter over the framework-agnostic @dnd-kit/dom core.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/dnd-kit"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./hooks": "./src/hooks/index.ts",
+    "./sortable": "./src/sortable/index.ts",
+    "./utilities": "./src/utilities/index.ts"
+  },
+  "dependencies": {
+    "@dnd-kit/abstract": "0.5.0",
+    "@dnd-kit/collision": "0.5.0",
+    "@dnd-kit/dom": "0.5.0",
+    "@dnd-kit/state": "0.5.0"
+  },
+  "peerDependencies": {
+    "octane": "0.1.5"
+  },
+  "devDependencies": {
+    "@dnd-kit/helpers": "0.5.0",
+    "@dnd-kit/react": "0.5.0",
+    "@tsrx/react": "^0.2.37",
+    "@vitest/coverage-v8": "4.1.9",
+    "esbuild": "^0.28.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "vitest": "^4.1.9",
+    "octane": "0.1.5"
+  },
+  "scripts": {
+    "test": "vitest run --root ../.. --project dnd-kit",
+    "test:coverage": "vitest run --root ../.. --project dnd-kit --coverage.enabled --coverage.provider=v8 --coverage.include=packages/dnd-kit/src/** --coverage.reporter=text --coverage.thresholds.lines=100 --coverage.thresholds.statements=98 --coverage.thresholds.functions=98 --coverage.thresholds.branches=86"
+  }
+}

package/src/core/context/DragDropProvider.tsrx

@@ -0,0 +1,98 @@
+import { createElement, useEffect, useInsertionEffect, useRef } from 'octane';
+import type { Data, DragDropEventHandlers } from '@dnd-kit/abstract';
+import { DragDropManager, defaultPreset, resolveCustomizable } from '@dnd-kit/dom';
+import type { DragDropManagerInput, Draggable, Droppable } from '@dnd-kit/dom';
+import { deepEqual } from '@dnd-kit/state';
+import { useLatest } from '../../hooks/useLatest';
+import { useOnValueChange } from '../../hooks/useOnValueChange';
+import { DragDropContext } from './context';
+import { Renderer } from './renderer.tsrx';
+import type { OctaneRenderer } from './renderer.tsrx';
+
+export type Events<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>> =
+	DragDropEventHandlers<U, V, W>;
+
+export interface DragDropProviderProps<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>> extends DragDropManagerInput {
+	children?: unknown;
+	manager?: W;
+	onBeforeDragStart?: Events<T, U, V, W>['beforedragstart'];
+	onCollision?: Events<T, U, V, W>['collision'];
+	onDragStart?: Events<T, U, V, W>['dragstart'];
+	onDragMove?: Events<T, U, V, W>['dragmove'];
+	onDragOver?: Events<T, U, V, W>['dragover'];
+	onDragEnd?: Events<T, U, V, W>['dragend'];
+}
+
+const changeOptions = [undefined, deepEqual] as const;
+
+export function DragDropProvider<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>>(props: DragDropProviderProps<T, U, V, W>) {
+	const {
+		children,
+		onCollision,
+		onBeforeDragStart,
+		onDragStart,
+		onDragMove,
+		onDragOver,
+		onDragEnd,
+		...input
+	} = props;
+	const rendererRef = useRef<OctaneRenderer | null>(null);
+	const plugins = resolveCustomizable(input.plugins, defaultPreset.plugins);
+	const sensors = resolveCustomizable(input.sensors, defaultPreset.sensors);
+	const modifiers = resolveCustomizable(input.modifiers, defaultPreset.modifiers);
+	const handleBeforeDragStart = useLatest(onBeforeDragStart);
+	const handleDragStart = useLatest(onDragStart);
+	const handleDragOver = useLatest(onDragOver);
+	const handleDragMove = useLatest(onDragMove);
+	const handleDragEnd = useLatest(onDragEnd);
+	const handleCollision = useLatest(onCollision);
+	const manager = useStableInstance<W>(
+		() => input.manager ?? new DragDropManager<T, U, V>(input) as W,
+	);
+
+	useEffect(() => {
+		if (!rendererRef.current) throw new Error('Renderer not found');
+		const { renderer, trackRendering } = rendererRef.current;
+		const { monitor } = manager;
+		manager.renderer = renderer;
+		const listeners = [
+			monitor.addEventListener('beforedragstart', (event) => {
+				const callback = handleBeforeDragStart.current;
+				if (callback) trackRendering(() => callback(event, manager));
+			}),
+			monitor.addEventListener('dragstart', (event) => handleDragStart.current?.(event, manager)),
+			monitor.addEventListener('dragover', (event) => {
+				const callback = handleDragOver.current;
+				if (callback) trackRendering(() => callback(event, manager));
+			}),
+			monitor.addEventListener('dragmove', (event) => {
+				const callback = handleDragMove.current;
+				if (callback) trackRendering(() => callback(event, manager));
+			}),
+			monitor.addEventListener('dragend', (event) => {
+				const callback = handleDragEnd.current;
+				if (callback) trackRendering(() => callback(event, manager));
+			}),
+			monitor.addEventListener('collision', (event) => handleCollision.current?.(event, manager)),
+		];
+		return () => listeners.forEach((dispose) => dispose());
+	}, [manager]);
+
+	useOnValueChange(plugins, () => (manager.plugins = plugins), ...changeOptions);
+	useOnValueChange(sensors, () => (manager.sensors = sensors), ...changeOptions);
+	useOnValueChange(modifiers, () => (manager.modifiers = modifiers), ...changeOptions);
+
+	return createElement(
+		DragDropContext.Provider,
+		{ value: manager as DragDropManager },
+		createElement(Renderer, { ref: rendererRef }, children),
+		children,
+	);
+}
+
+function useStableInstance<T extends { destroy(): void }>(create: () => T): T {
+	const ref = useRef<T | null>(null);
+	if (!ref.current) ref.current = create();
+	useInsertionEffect(() => () => ref.current?.destroy(), []);
+	return ref.current;
+}

package/src/core/context/DragDropProvider.tsrx.d.ts

@@ -0,0 +1,32 @@
+import type { Data, DragDropEventHandlers } from '@dnd-kit/abstract';
+import type { DragDropManager, DragDropManagerInput, Draggable, Droppable } from '@dnd-kit/dom';
+
+export type Events<
+	T extends Data = Data,
+	U extends Draggable<T> = Draggable<T>,
+	V extends Droppable<T> = Droppable<T>,
+	W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>,
+> = DragDropEventHandlers<U, V, W>;
+
+export interface DragDropProviderProps<
+	T extends Data = Data,
+	U extends Draggable<T> = Draggable<T>,
+	V extends Droppable<T> = Droppable<T>,
+	W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>,
+> extends DragDropManagerInput {
+	children?: unknown;
+	manager?: W;
+	onBeforeDragStart?: Events<T, U, V, W>['beforedragstart'];
+	onCollision?: Events<T, U, V, W>['collision'];
+	onDragStart?: Events<T, U, V, W>['dragstart'];
+	onDragMove?: Events<T, U, V, W>['dragmove'];
+	onDragOver?: Events<T, U, V, W>['dragover'];
+	onDragEnd?: Events<T, U, V, W>['dragend'];
+}
+
+export declare function DragDropProvider<
+	T extends Data = Data,
+	U extends Draggable<T> = Draggable<T>,
+	V extends Droppable<T> = Droppable<T>,
+	W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>,
+>(props: DragDropProviderProps<T, U, V, W>): unknown;

package/src/core/context/context.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'octane';
+import type { DragDropManager } from '@dnd-kit/dom';
+
+export const DragDropContext = createContext<DragDropManager | null>(null);

package/src/core/context/renderer.tsrx

@@ -0,0 +1,44 @@
+import { memo, startTransition, useImperativeHandle, useMemo, useRef, useState } from 'octane';
+import type { Renderer as AbstractRenderer } from '@dnd-kit/abstract';
+import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
+
+export type OctaneRenderer = {
+	renderer: AbstractRenderer;
+	trackRendering: (callback: () => void) => void;
+};
+
+function RendererImpl(props: { children: unknown; ref?: { current: OctaneRenderer | null } }) {
+	const [transitionCount, setTransitionCount] = useState(0);
+	const rendering = useRef<Promise<void> | null>(null);
+	const resolver = useRef<(() => void) | null>(null);
+	const renderer = useMemo<OctaneRenderer>(
+		() => ({
+			renderer: {
+				get rendering() {
+					return rendering.current ?? Promise.resolve();
+				},
+			},
+			trackRendering(callback: () => void) {
+				if (!rendering.current) {
+					rendering.current = new Promise<void>((resolve) => {
+						resolver.current = resolve;
+					});
+				}
+				startTransition(() => {
+					callback();
+					setTransitionCount((count) => count + 1);
+				});
+			},
+		}),
+		[],
+	);
+
+	useIsomorphicLayoutEffect(() => {
+		resolver.current?.();
+		rendering.current = null;
+	}, [props.children, transitionCount]);
+	useImperativeHandle(props.ref, () => renderer);
+	return null;
+}
+
+export const Renderer = memo(RendererImpl);

package/src/core/draggable/DragOverlay.tsrx

@@ -0,0 +1,91 @@
+import { createElement, isChildrenBlock, useEffect, useMemo, useRef } from 'octane';
+import type { Data } from '@dnd-kit/abstract';
+import { DragDropManager, Draggable, Feedback } from '@dnd-kit/dom';
+import type { DropAnimation } from '@dnd-kit/dom';
+import { useComputed } from '../../hooks/useComputed';
+import { useDeepSignal } from '../../hooks/useDeepSignal';
+import { DragDropContext } from '../context/context';
+import { useDragDropManager } from '../hooks/useDragDropManager';
+
+type DragOverlayChild = object | string | number | bigint | boolean | null | undefined;
+
+export interface DragOverlayProps<T extends Data, U extends Draggable<T>> {
+	className?: string;
+	children: DragOverlayChild | ((source: U) => DragOverlayChild);
+	dropAnimation?: DropAnimation | null;
+	style?: Record<string, string | number | null | undefined>;
+	tag?: string;
+	disabled?: boolean | ((source: U | null) => boolean);
+}
+
+export function DragOverlay<T extends Data, U extends Draggable<T>>(props: DragOverlayProps<T, U>) {
+	const { children, className, dropAnimation, style, tag, disabled } = props;
+	const ref = useRef<HTMLElement | null>(null);
+	const manager = useDragDropManager<T, U>();
+	const source = useComputed(() => manager?.dragOperation.source, [manager]).value ?? null;
+	const isDisabled =
+		typeof disabled === 'function' ? disabled(source) : disabled;
+
+	useEffect(() => {
+		if (!ref.current || !manager || isDisabled) return;
+		const feedback = manager.plugins.find((plugin) => plugin instanceof Feedback);
+		if (!feedback) return;
+		feedback.overlay = ref.current;
+		return () => {
+			feedback.overlay = undefined;
+		};
+	}, [manager, isDisabled]);
+
+	useEffect(() => {
+		if (!manager) return;
+		const feedback = manager.plugins.find((plugin) => plugin instanceof Feedback);
+		if (!feedback) return;
+		feedback.dropAnimation = dropAnimation;
+		return () => {
+			feedback.dropAnimation = undefined;
+		};
+	}, [manager, dropAnimation]);
+
+	const patchedManager = useMemo(() => {
+		if (!manager) return null;
+		const patchedRegistry = new Proxy(manager.registry, {
+			get(target, property) {
+				if (property === 'register' || property === 'unregister') return noop;
+				return target[property as keyof typeof target];
+			},
+		});
+		return new Proxy(manager, {
+			get(target, property) {
+				if (property === 'registry') return patchedRegistry;
+				return target[property as keyof typeof target];
+			},
+		});
+	}, [manager]);
+
+	let content: unknown = null;
+	if (source && !isDisabled) {
+		content = typeof children === 'function' && !isChildrenBlock(children)
+			? createElement(OverlayChildren, { source, children })
+			: children;
+	}
+
+	return createElement(DragDropContext.Provider, {
+		value: patchedManager as DragDropManager | null,
+		children: createElement(
+			tag || 'div',
+			{ ref, className, style, 'data-dnd-overlay': true },
+			content,
+		),
+	});
+}
+
+function noop() {
+	return () => {};
+}
+
+function OverlayChildren<T extends Data, U extends Draggable<T>>(props: {
+	children: (source: U) => DragOverlayChild;
+	source: U;
+}) {
+	return props.children(useDeepSignal(props.source));
+}

package/src/core/draggable/DragOverlay.tsrx.d.ts

@@ -0,0 +1,17 @@
+import type { Data } from '@dnd-kit/abstract';
+import type { Draggable, DropAnimation } from '@dnd-kit/dom';
+
+type DragOverlayChild = object | string | number | bigint | boolean | null | undefined;
+
+export interface DragOverlayProps<T extends Data, U extends Draggable<T>> {
+	className?: string;
+	children: DragOverlayChild | ((source: U) => DragOverlayChild);
+	dropAnimation?: DropAnimation | null;
+	style?: Record<string, string | number | null | undefined>;
+	tag?: string;
+	disabled?: boolean | ((source: U | null) => boolean);
+}
+
+export declare function DragOverlay<T extends Data, U extends Draggable<T>>(
+	props: DragOverlayProps<T, U>,
+): unknown;

package/src/core/draggable/useDraggable.ts

@@ -0,0 +1,111 @@
+import { useCallback } from 'octane';
+import type { Data } from '@dnd-kit/abstract';
+import { deepEqual } from '@dnd-kit/state';
+import { Draggable } from '@dnd-kit/dom';
+import type { DraggableInput } from '@dnd-kit/dom';
+import { subSlot } from '../../internal';
+import { useDeepSignal } from '../../hooks/useDeepSignal';
+import { useOnElementChange } from '../../hooks/useOnElementChange';
+import { useOnValueChange } from '../../hooks/useOnValueChange';
+import { currentValue, type RefOrValue } from '../../utilities/currentValue';
+import { useInstance } from '../hooks/useInstance';
+
+export interface UseDraggableInput<T extends Data = Data> extends Omit<
+	DraggableInput<T>,
+	'handle' | 'element'
+> {
+	handle?: RefOrValue<Element>;
+	element?: RefOrValue<Element>;
+}
+
+export function useDraggable<T extends Data = Data>(input: UseDraggableInput<T>, slot?: symbol) {
+	const { disabled, data, element, handle, id, modifiers, sensors, plugins } = input;
+	const draggable = useInstance(
+		(manager) =>
+			new Draggable(
+				{
+					...input,
+					register: false,
+					handle: currentValue(handle),
+					element: currentValue(element),
+				},
+				manager,
+			),
+		subSlot(slot, 'instance'),
+	);
+	const tracked = useDeepSignal(draggable, shouldUpdateSynchronously, subSlot(slot, 'signal'));
+
+	useOnValueChange(id, () => (draggable.id = id), subSlot(slot, 'id'));
+	useOnElementChange(handle, (value) => (draggable.handle = value), subSlot(slot, 'handle'));
+	useOnElementChange(element, (value) => (draggable.element = value), subSlot(slot, 'element'));
+	useOnValueChange(data, () => data && (draggable.data = data), subSlot(slot, 'data'));
+	useOnValueChange(
+		disabled,
+		() => (draggable.disabled = disabled === true),
+		subSlot(slot, 'disabled'),
+	);
+	useOnValueChange(
+		sensors,
+		() => (draggable.sensors = sensors),
+		undefined,
+		deepEqual,
+		subSlot(slot, 'sensors'),
+	);
+	useOnValueChange(
+		modifiers,
+		() => (draggable.modifiers = modifiers),
+		undefined,
+		deepEqual,
+		subSlot(slot, 'modifiers'),
+	);
+	useOnValueChange(
+		plugins,
+		() => (draggable.plugins = plugins),
+		undefined,
+		deepEqual,
+		subSlot(slot, 'plugins'),
+	);
+	useOnValueChange(
+		input.alignment,
+		() => (draggable.alignment = input.alignment),
+		subSlot(slot, 'alignment'),
+	);
+
+	return {
+		draggable: tracked,
+		get isDragging() {
+			return tracked.isDragging;
+		},
+		get isDropping() {
+			return tracked.isDropping;
+		},
+		get isDragSource() {
+			return tracked.isDragSource;
+		},
+		handleRef: useCallback(
+			(value: Element | null) => {
+				draggable.handle = value ?? undefined;
+			},
+			[draggable],
+			subSlot(slot, 'handle-ref'),
+		),
+		ref: useCallback(
+			(value: Element | null) => {
+				if (
+					!value &&
+					draggable.element?.isConnected &&
+					!draggable.manager?.dragOperation.status.idle
+				) {
+					return;
+				}
+				draggable.element = value ?? undefined;
+			},
+			[draggable],
+			subSlot(slot, 'ref'),
+		),
+	};
+}
+
+function shouldUpdateSynchronously(key: string, oldValue: any, newValue: any): boolean {
+	return key === 'isDragSource' && !newValue && oldValue;
+}

package/src/core/droppable/useDroppable.ts

@@ -0,0 +1,79 @@
+import { useCallback } from 'octane';
+import type { Data } from '@dnd-kit/abstract';
+import { defaultCollisionDetection } from '@dnd-kit/collision';
+import { Droppable } from '@dnd-kit/dom';
+import type { DroppableInput } from '@dnd-kit/dom';
+import { deepEqual } from '@dnd-kit/state';
+import { subSlot } from '../../internal';
+import { useDeepSignal } from '../../hooks/useDeepSignal';
+import { useOnElementChange } from '../../hooks/useOnElementChange';
+import { useOnValueChange } from '../../hooks/useOnValueChange';
+import { currentValue, type RefOrValue } from '../../utilities/currentValue';
+import { useInstance } from '../hooks/useInstance';
+
+export interface UseDroppableInput<T extends Data = Data> extends Omit<
+	DroppableInput<T>,
+	'element'
+> {
+	element?: RefOrValue<Element>;
+}
+
+export function useDroppable<T extends Data = Data>(input: UseDroppableInput<T>, slot?: symbol) {
+	const { collisionDetector, data, disabled, element, id, accept, type } = input;
+	const droppable = useInstance(
+		(manager) =>
+			new Droppable(
+				{
+					...input,
+					register: false,
+					element: currentValue(element),
+				},
+				manager,
+			),
+		subSlot(slot, 'instance'),
+	);
+	const tracked = useDeepSignal(droppable, subSlot(slot, 'signal'));
+
+	useOnValueChange(id, () => (droppable.id = id), subSlot(slot, 'id'));
+	useOnElementChange(element, (value) => (droppable.element = value), subSlot(slot, 'element'));
+	useOnValueChange(
+		accept,
+		() => (droppable.accept = accept),
+		undefined,
+		deepEqual,
+		subSlot(slot, 'accept'),
+	);
+	useOnValueChange(
+		collisionDetector,
+		() => (droppable.collisionDetector = collisionDetector ?? defaultCollisionDetection),
+		subSlot(slot, 'collision'),
+	);
+	useOnValueChange(data, () => data && (droppable.data = data), subSlot(slot, 'data'));
+	useOnValueChange(
+		disabled,
+		() => (droppable.disabled = disabled === true),
+		subSlot(slot, 'disabled'),
+	);
+	useOnValueChange(type, () => (droppable.type = type), subSlot(slot, 'type'));
+
+	return {
+		droppable: tracked,
+		get isDropTarget() {
+			return tracked.isDropTarget;
+		},
+		ref: useCallback(
+			(value: Element | null) => {
+				if (
+					!value &&
+					droppable.element?.isConnected &&
+					!droppable.manager?.dragOperation.status.idle
+				) {
+					return;
+				}
+				droppable.element = value ?? undefined;
+			},
+			[droppable],
+			subSlot(slot, 'ref'),
+		),
+	};
+}

package/src/core/hooks/useDragDropManager.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'octane';
+import type { Data } from '@dnd-kit/abstract';
+import type { Draggable, Droppable, DragDropManager } from '@dnd-kit/dom';
+import { DragDropContext } from '../context/context';
+
+export function useDragDropManager<
+	T extends Data = Data,
+	U extends Draggable<T> = Draggable<T>,
+	V extends Droppable<T> = Droppable<T>,
+	W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>,
+>(_slot?: symbol): W | null {
+	return useContext(DragDropContext) as W | null;
+}

package/src/core/hooks/useDragDropMonitor.ts

@@ -0,0 +1,69 @@
+import { useEffect } from 'octane';
+import type { DragDropEventHandlers, Data } from '@dnd-kit/abstract';
+import type { Draggable, Droppable, DragDropManager } from '@dnd-kit/dom';
+import type { CleanupFunction } from '@dnd-kit/state';
+import { subSlot } from '../../internal';
+import { useDragDropManager } from './useDragDropManager';
+
+type EventNameOverrides = { beforedragstart: 'onBeforeDragStart' };
+type EventHandlerName<T extends string> = T extends keyof EventNameOverrides
+	? EventNameOverrides[T]
+	: T extends `drag${infer Second}${infer Rest}`
+		? `onDrag${Uppercase<Second>}${Rest}`
+		: `on${Capitalize<T>}`;
+
+type Events<
+	T extends Data,
+	U extends Draggable<T>,
+	V extends Droppable<T>,
+	W extends DragDropManager<T, U, V>,
+> = DragDropEventHandlers<U, V, W>;
+
+export type EventHandlers<
+	T extends Data = Data,
+	U extends Draggable<T> = Draggable<T>,
+	V extends Droppable<T> = Droppable<T>,
+	W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>,
+> = {
+	[K in keyof Events<T, U, V, W> as EventHandlerName<K>]: Events<T, U, V, W>[K];
+};
+
+export function useDragDropMonitor<
+	T extends Data = Data,
+	U extends Draggable<T> = Draggable<T>,
+	V extends Droppable<T> = Droppable<T>,
+	W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>,
+>(handlers: Partial<EventHandlers<T, U, V, W>>, slot?: symbol): void {
+	const manager = useDragDropManager<T, U, V, W>();
+	useEffect(
+		() => {
+			if (!manager) {
+				if (process.env.NODE_ENV !== 'production') {
+					console.warn(
+						'useDragDropMonitor hook was called outside of a DragDropProvider. ' +
+							'Make sure your app is wrapped in a DragDropProvider component.',
+					);
+				}
+				return;
+			}
+			const cleanup = Object.entries(handlers).reduce<CleanupFunction[]>(
+				(entries, [handlerName, handler]) => {
+					if (handler) {
+						const eventName = handlerName.replace(/^on/, '').toLowerCase() as keyof Events<
+							T,
+							U,
+							V,
+							W
+						>;
+						entries.push(manager.monitor.addEventListener(eventName, handler as any));
+					}
+					return entries;
+				},
+				[],
+			);
+			return () => cleanup.forEach((dispose) => dispose());
+		},
+		[manager, handlers],
+		subSlot(slot, 'effect'),
+	);
+}

package/src/core/hooks/useDragOperation.ts

@@ -0,0 +1,34 @@
+import type { Data } from '@dnd-kit/abstract';
+import type { Draggable, Droppable, DragDropManager } from '@dnd-kit/dom';
+import { subSlot } from '../../internal';
+import { useComputed } from '../../hooks/useComputed';
+import { useDragDropManager } from './useDragDropManager';
+
+export function useDragOperation<
+	T extends Data = Data,
+	U extends Draggable<T> = Draggable<T>,
+	V extends Droppable<T> = Droppable<T>,
+	W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>,
+>(slot?: symbol): { readonly source: U | null | undefined; readonly target: V | null | undefined } {
+	const manager = useDragDropManager<T, U, V, W>();
+	const source = useComputed(
+		() => manager?.dragOperation.source,
+		[manager],
+		false,
+		subSlot(slot, 'source'),
+	);
+	const target = useComputed(
+		() => manager?.dragOperation.target,
+		[manager],
+		false,
+		subSlot(slot, 'target'),
+	);
+	return {
+		get source() {
+			return source.value as U | null | undefined;
+		},
+		get target() {
+			return target.value as V | null | undefined;
+		},
+	};
+}

package/src/core/hooks/useInstance.ts

@@ -0,0 +1,22 @@
+import { useState } from 'octane';
+import type { DragDropManager } from '@dnd-kit/abstract';
+import type { CleanupFunction } from '@dnd-kit/state';
+import { subSlot } from '../../internal';
+import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
+import { useDragDropManager } from './useDragDropManager';
+
+export interface Instance<T extends DragDropManager<any, any> = DragDropManager<any, any>> {
+	manager: T | undefined;
+	register(): CleanupFunction | void;
+}
+
+export function useInstance<T extends Instance>(
+	initializer: (manager: DragDropManager<any, any> | undefined) => T,
+	slot?: symbol,
+): T {
+	const manager = useDragDropManager() ?? undefined;
+	const [instance] = useState<T>(() => initializer(manager), subSlot(slot, 'instance'));
+	if (instance.manager !== manager) instance.manager = manager;
+	useIsomorphicLayoutEffect(instance.register, [manager, instance], subSlot(slot, 'register'));
+	return instance;
+}

package/src/core/index.ts

@@ -0,0 +1,21 @@
+export { DragDropProvider, type DragDropProviderProps } from './context/DragDropProvider.tsrx';
+export { useDraggable, type UseDraggableInput } from './draggable/useDraggable';
+export { DragOverlay, type DragOverlayProps } from './draggable/DragOverlay.tsrx';
+export { useDroppable, type UseDroppableInput } from './droppable/useDroppable';
+export { useDragDropManager } from './hooks/useDragDropManager';
+export {
+	useDragDropMonitor,
+	type EventHandlers as DragDropEventHandlers,
+} from './hooks/useDragDropMonitor';
+export { useDragOperation } from './hooks/useDragOperation';
+export { useInstance } from './hooks/useInstance';
+export { KeyboardSensor, PointerSensor } from '@dnd-kit/dom';
+export type {
+	DragDropManager,
+	CollisionEvent,
+	BeforeDragStartEvent,
+	DragStartEvent,
+	DragMoveEvent,
+	DragOverEvent,
+	DragEndEvent,
+} from '@dnd-kit/dom';

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+export { useConstant } from './useConstant';
+export { useComputed } from './useComputed';
+export { useDeepSignal } from './useDeepSignal';
+export { useImmediateEffect } from './useImmediateEffect';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { useLatest } from './useLatest';
+export { useOnValueChange } from './useOnValueChange';
+export { useOnElementChange } from './useOnElementChange';

package/src/hooks/useComputed.ts

@@ -0,0 +1,28 @@
+import { useMemo, useRef } from 'octane';
+import { computed, type Signal } from '@dnd-kit/state';
+import { subSlot } from '../internal';
+import { useSignal } from './useSignal';
+
+export function useComputed<T = any>(
+	compute: () => T,
+	dependenciesOrSlot: any[] | symbol = [],
+	synchronousOrSlot: boolean | symbol = false,
+	maybeSlot?: symbol,
+): { readonly value: T } {
+	const slot =
+		typeof dependenciesOrSlot === 'symbol'
+			? dependenciesOrSlot
+			: typeof synchronousOrSlot === 'symbol'
+				? synchronousOrSlot
+				: maybeSlot;
+	const dependencies = Array.isArray(dependenciesOrSlot) ? dependenciesOrSlot : [];
+	const synchronous = typeof synchronousOrSlot === 'boolean' ? synchronousOrSlot : false;
+	const computeRef = useRef(compute, subSlot(slot, 'compute'));
+	computeRef.current = compute;
+	const value = useMemo(
+		() => computed(() => computeRef.current()),
+		dependencies,
+		subSlot(slot, 'memo'),
+	);
+	return useSignal(value as Signal<T>, synchronous, subSlot(slot, 'signal'));
+}

package/src/hooks/useConstant.ts

@@ -0,0 +1,7 @@
+import { useRef } from 'octane';
+
+export function useConstant<T = any>(initializer: () => T, slot?: symbol): T {
+	const ref = useRef<T | null>(null, slot);
+	if (ref.current === null) ref.current = initializer();
+	return ref.current;
+}

package/src/hooks/useDeepSignal.ts

@@ -0,0 +1,61 @@
+import { flushSync, useMemo, useRef } from 'octane';
+import { effect, untracked } from '@dnd-kit/state';
+import { subSlot } from '../internal';
+import { useForceUpdate } from './useForceUpdate';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
+type Synchronous<T> = (property: keyof T, oldValue: any, newValue: any) => boolean;
+
+export function useDeepSignal<T extends object | null | undefined>(
+	target: T,
+	synchronousOrSlot?: Synchronous<NonNullable<T>> | symbol,
+	maybeSlot?: symbol,
+): T {
+	const slot = typeof synchronousOrSlot === 'symbol' ? synchronousOrSlot : maybeSlot;
+	const synchronous = typeof synchronousOrSlot === 'function' ? synchronousOrSlot : undefined;
+	const tracked = useRef(new Map<string | symbol, any>(), subSlot(slot, 'tracked'));
+	const forceUpdate = useForceUpdate(subSlot(slot, 'force'));
+
+	useIsomorphicLayoutEffect(
+		() => {
+			if (!target) {
+				tracked.current.clear();
+				return;
+			}
+			return effect(() => {
+				let stale = false;
+				let sync = false;
+				for (const [key, previous] of tracked.current) {
+					const value = untracked(() => previous);
+					const latestValue = (target as any)[key];
+					if (value !== latestValue) {
+						stale = true;
+						tracked.current.set(key, latestValue);
+						sync = synchronous?.(key as keyof NonNullable<T>, value, latestValue) ?? false;
+					}
+				}
+				if (stale) {
+					if (sync) queueMicrotask(() => flushSync(forceUpdate));
+					else forceUpdate();
+				}
+			});
+		},
+		[target],
+		subSlot(slot, 'effect'),
+	);
+
+	return useMemo(
+		() =>
+			target
+				? new Proxy(target, {
+						get(value, key) {
+							const current = (value as any)[key];
+							tracked.current.set(key, current);
+							return current;
+						},
+					})
+				: target,
+		[target],
+		subSlot(slot, 'memo'),
+	);
+}

package/src/hooks/useForceUpdate.ts

@@ -0,0 +1,13 @@
+import { useCallback, useState } from 'octane';
+import { subSlot } from '../internal';
+
+export function useForceUpdate(slot?: symbol): () => void {
+	const setState = useState(0, subSlot(slot, 'state'))[1];
+	return useCallback(
+		() => {
+			setState((value) => value + 1);
+		},
+		[],
+		subSlot(slot, 'callback'),
+	);
+}

package/src/hooks/useImmediateEffect.ts

@@ -0,0 +1,6 @@
+export function useImmediateEffect(
+	callback: () => void | (() => void),
+	_dependencies?: any[] | null,
+): void {
+	callback();
+}

package/src/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,17 @@
+import { useEffect, useLayoutEffect } from 'octane';
+import { canUseDOM } from '@dnd-kit/dom/utilities';
+
+type EffectCallback = () => void | (() => void);
+type EffectHook = (callback: EffectCallback, deps?: any[] | null, slot?: symbol) => void;
+
+const effect: EffectHook = canUseDOM ? useLayoutEffect : useEffect;
+
+export function useIsomorphicLayoutEffect(
+	callback: EffectCallback,
+	dependenciesOrSlot?: any[] | null | symbol,
+	maybeSlot?: symbol,
+): void {
+	const slot = typeof dependenciesOrSlot === 'symbol' ? dependenciesOrSlot : maybeSlot;
+	const dependencies = typeof dependenciesOrSlot === 'symbol' ? undefined : dependenciesOrSlot;
+	effect(callback, dependencies, slot);
+}

package/src/hooks/useLatest.ts

@@ -0,0 +1,15 @@
+import { useRef } from 'octane';
+import { subSlot } from '../internal';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
+export function useLatest<T>(value: T, slot?: symbol): { current: T | undefined } {
+	const valueRef = useRef<T | undefined>(value, subSlot(slot, 'ref'));
+	useIsomorphicLayoutEffect(
+		() => {
+			valueRef.current = value;
+		},
+		undefined,
+		subSlot(slot, 'effect'),
+	);
+	return valueRef;
+}

package/src/hooks/useOnElementChange.ts

@@ -0,0 +1,23 @@
+import { useRef } from 'octane';
+import { currentValue, type RefOrValue } from '../utilities/currentValue';
+import { subSlot } from '../internal';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
+export function useOnElementChange(
+	value: RefOrValue<Element>,
+	onChange: (value: Element | undefined) => void,
+	slot?: symbol,
+): void {
+	const previous = useRef(currentValue(value), subSlot(slot, 'previous'));
+	useIsomorphicLayoutEffect(
+		() => {
+			const current = currentValue(value);
+			if (current !== previous.current) {
+				previous.current = current;
+				onChange(current);
+			}
+		},
+		undefined,
+		subSlot(slot, 'effect'),
+	);
+}

package/src/hooks/useOnValueChange.ts

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from 'octane';
+import { subSlot } from '../internal';
+
+type EffectHook = (
+	callback: () => void | (() => void),
+	dependencies?: any[] | null,
+	slot?: symbol,
+) => void;
+
+export function useOnValueChange<T>(
+	value: T,
+	onChange: (value: T, oldValue: T) => void,
+	effectOrSlot: EffectHook | symbol | undefined = useEffect,
+	compareOrSlot: ((a: T, b: T) => boolean) | symbol | undefined = Object.is,
+	maybeSlot?: symbol,
+): void {
+	const slot =
+		typeof effectOrSlot === 'symbol'
+			? effectOrSlot
+			: typeof compareOrSlot === 'symbol'
+				? compareOrSlot
+				: maybeSlot;
+	const effect = typeof effectOrSlot === 'function' ? effectOrSlot : useEffect;
+	const compare = typeof compareOrSlot === 'function' ? compareOrSlot : Object.is;
+	const tracked = useRef<T>(value, subSlot(slot, 'tracked'));
+
+	effect(
+		() => {
+			const oldValue = tracked.current;
+			if (!compare(value, oldValue)) {
+				tracked.current = value;
+				onChange(value, oldValue);
+			}
+		},
+		[onChange, value],
+		subSlot(slot, 'effect'),
+	);
+}

package/src/hooks/useSignal.ts

@@ -0,0 +1,40 @@
+import { flushSync, useRef } from 'octane';
+import { effect, type Signal } from '@dnd-kit/state';
+import { subSlot } from '../internal';
+import { useForceUpdate } from './useForceUpdate';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
+export function useSignal<T = any>(
+	signal: Signal<T>,
+	synchronousOrSlot: boolean | symbol = false,
+	maybeSlot?: symbol,
+): { readonly value: T } {
+	const slot = typeof synchronousOrSlot === 'symbol' ? synchronousOrSlot : maybeSlot;
+	const synchronous = typeof synchronousOrSlot === 'boolean' ? synchronousOrSlot : false;
+	const previous = useRef(signal.peek(), subSlot(slot, 'previous'));
+	const read = useRef(false, subSlot(slot, 'read'));
+	const forceUpdate = useForceUpdate(subSlot(slot, 'force'));
+
+	useIsomorphicLayoutEffect(
+		() =>
+			effect(() => {
+				const previousValue = previous.current;
+				const currentValue = signal.value;
+				if (previousValue !== currentValue) {
+					previous.current = currentValue;
+					if (!read.current) return;
+					if (synchronous) flushSync(forceUpdate);
+					else forceUpdate();
+				}
+			}),
+		[signal, synchronous, forceUpdate],
+		subSlot(slot, 'effect'),
+	);
+
+	return {
+		get value() {
+			read.current = true;
+			return signal.peek();
+		},
+	};
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './core/index';

package/src/internal.ts

@@ -0,0 +1,17 @@
+// The package ships raw TypeScript. Public custom hooks receive the compiler's
+// trailing call-site slot and derive distinct slots for every base hook they
+// compose. This keeps multiple draggable/sortable hooks in one component
+// isolated while preserving upstream's stable hook identities.
+const subSlotCache = new Map<symbol, Map<string, symbol>>();
+
+export function subSlot(slot: symbol | undefined, tag: string): symbol | undefined {
+	if (slot === undefined) return undefined;
+	let byTag = subSlotCache.get(slot);
+	if (byTag === undefined) subSlotCache.set(slot, (byTag = new Map()));
+	let derived = byTag.get(tag);
+	if (derived === undefined) {
+		derived = Symbol((slot.description ?? '') + ':' + tag);
+		byTag.set(tag, derived);
+	}
+	return derived;
+}

package/src/sortable/index.ts

@@ -0,0 +1,2 @@
+export { useSortable, type UseSortableInput } from './useSortable';
+export { isSortable, isSortableOperation } from '@dnd-kit/dom/sortable';

package/src/sortable/useSortable.ts

@@ -0,0 +1,195 @@
+import { useCallback } from 'octane';
+import type { Data } from '@dnd-kit/abstract';
+import { Sortable, defaultSortableTransition } from '@dnd-kit/dom/sortable';
+import type { SortableInput } from '@dnd-kit/dom/sortable';
+import { batch, deepEqual } from '@dnd-kit/state';
+import { useInstance } from '../core/hooks/useInstance';
+import { subSlot } from '../internal';
+import { useDeepSignal } from '../hooks/useDeepSignal';
+import { useImmediateEffect } from '../hooks/useImmediateEffect';
+import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
+import { useOnElementChange } from '../hooks/useOnElementChange';
+import { useOnValueChange } from '../hooks/useOnValueChange';
+import { currentValue, type RefOrValue } from '../utilities/currentValue';
+
+export interface UseSortableInput<T extends Data = Data> extends Omit<
+	SortableInput<T>,
+	'handle' | 'element' | 'target'
+> {
+	handle?: RefOrValue<Element>;
+	element?: RefOrValue<Element>;
+	target?: RefOrValue<Element>;
+}
+
+export function useSortable<T extends Data = Data>(input: UseSortableInput<T>, slot?: symbol) {
+	const {
+		accept,
+		collisionDetector,
+		collisionPriority,
+		id,
+		data,
+		element,
+		handle,
+		index,
+		group,
+		disabled,
+		modifiers,
+		sensors,
+		target,
+		type,
+		plugins,
+	} = input;
+	const transition = { ...defaultSortableTransition, ...input.transition };
+	const sortable = useInstance(
+		(manager) =>
+			new Sortable(
+				{
+					...input,
+					transition,
+					register: false,
+					handle: currentValue(handle),
+					element: currentValue(element),
+					target: currentValue(target),
+				},
+				manager,
+			),
+		subSlot(slot, 'instance'),
+	);
+	const tracked = useDeepSignal(sortable, shouldUpdateSynchronously, subSlot(slot, 'signal'));
+
+	useOnValueChange(id, () => (sortable.id = id), subSlot(slot, 'id'));
+	useIsomorphicLayoutEffect(
+		() => {
+			batch(() => {
+				sortable.group = group;
+				sortable.index = index;
+			});
+		},
+		[sortable, group, index],
+		subSlot(slot, 'position'),
+	);
+	useOnValueChange(type, () => (sortable.type = type), subSlot(slot, 'type'));
+	useOnValueChange(
+		accept,
+		() => (sortable.accept = accept),
+		undefined,
+		deepEqual,
+		subSlot(slot, 'accept'),
+	);
+	useOnValueChange(data, () => data && (sortable.data = data), subSlot(slot, 'data'));
+	useOnValueChange(
+		index,
+		() => {
+			if (sortable.manager?.dragOperation.status.idle && transition.idle) {
+				sortable.refreshShape();
+			}
+		},
+		useImmediateEffect,
+		undefined,
+		subSlot(slot, 'refresh'),
+	);
+	useOnElementChange(handle, (value) => (sortable.handle = value), subSlot(slot, 'handle'));
+	useOnElementChange(element, (value) => (sortable.element = value), subSlot(slot, 'element'));
+	useOnElementChange(target, (value) => (sortable.target = value), subSlot(slot, 'target'));
+	useOnValueChange(
+		disabled,
+		() => (sortable.disabled = disabled ?? false),
+		undefined,
+		deepEqual,
+		subSlot(slot, 'disabled'),
+	);
+	useOnValueChange(
+		sensors,
+		() => (sortable.sensors = sensors),
+		undefined,
+		deepEqual,
+		subSlot(slot, 'sensors'),
+	);
+	useOnValueChange(
+		collisionDetector,
+		() => (sortable.collisionDetector = collisionDetector),
+		subSlot(slot, 'collision'),
+	);
+	useOnValueChange(
+		collisionPriority,
+		() => (sortable.collisionPriority = collisionPriority),
+		subSlot(slot, 'priority'),
+	);
+	useOnValueChange(
+		plugins,
+		() => (sortable.plugins = plugins),
+		undefined,
+		deepEqual,
+		subSlot(slot, 'plugins'),
+	);
+	useOnValueChange(
+		transition,
+		() => (sortable.transition = transition),
+		undefined,
+		deepEqual,
+		subSlot(slot, 'transition'),
+	);
+	useOnValueChange(
+		modifiers,
+		() => (sortable.modifiers = modifiers),
+		undefined,
+		deepEqual,
+		subSlot(slot, 'modifiers'),
+	);
+	useOnValueChange(
+		input.alignment,
+		() => (sortable.alignment = input.alignment),
+		subSlot(slot, 'alignment'),
+	);
+
+	const keepDuringDrag = (value: Element | null, current: Element | undefined) =>
+		!value && current?.isConnected && !sortable.manager?.dragOperation.status.idle;
+
+	return {
+		sortable: tracked,
+		get isDragging() {
+			return tracked.isDragging;
+		},
+		get isDropping() {
+			return tracked.isDropping;
+		},
+		get isDragSource() {
+			return tracked.isDragSource;
+		},
+		get isDropTarget() {
+			return tracked.isDropTarget;
+		},
+		handleRef: useCallback(
+			(value: Element | null) => {
+				sortable.handle = value ?? undefined;
+			},
+			[sortable],
+			subSlot(slot, 'handle-ref'),
+		),
+		ref: useCallback(
+			(value: Element | null) => {
+				if (!keepDuringDrag(value, sortable.element)) sortable.element = value ?? undefined;
+			},
+			[sortable],
+			subSlot(slot, 'ref'),
+		),
+		sourceRef: useCallback(
+			(value: Element | null) => {
+				if (!keepDuringDrag(value, sortable.source)) sortable.source = value ?? undefined;
+			},
+			[sortable],
+			subSlot(slot, 'source-ref'),
+		),
+		targetRef: useCallback(
+			(value: Element | null) => {
+				if (!keepDuringDrag(value, sortable.target)) sortable.target = value ?? undefined;
+			},
+			[sortable],
+			subSlot(slot, 'target-ref'),
+		),
+	};
+}
+
+function shouldUpdateSynchronously(key: string, oldValue: any, newValue: any): boolean {
+	return key === 'isDragSource' && !newValue && oldValue;
+}

package/src/utilities/currentValue.ts

@@ -0,0 +1,13 @@
+export type Ref<T> = { current: T | null | undefined };
+
+export type RefOrValue<T> = T | Ref<T> | null | undefined;
+
+function isRef<T>(value: RefOrValue<T>): value is Ref<T> {
+	return value != null && typeof value === 'object' && 'current' in value;
+}
+
+export function currentValue<T>(value: RefOrValue<T>): NonNullable<T> | undefined {
+	if (value == null) return undefined;
+	if (isRef(value)) return value.current ?? undefined;
+	return value as NonNullable<T>;
+}

package/src/utilities/index.ts

@@ -0,0 +1 @@
+export { currentValue, type Ref, type RefOrValue } from './currentValue';