# `@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.

## Installation

```sh
npm install @octanejs/dnd-kit
pnpm add @octanejs/dnd-kit
```

```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`:

Parity evidence is intentionally `recorded-unverified`: the canonical adapter
source is pinned and vendored, but upstream contains no React-adapter test suite
at this release and the current differential covers one programmatic manager-action
drag lifecycle (not keyboard-sensor parity).
See [`UPSTREAM.md`](./UPSTREAM.md) for the exact boundary and open browser gaps.

- `@octanejs/dnd-kit`
- `@octanejs/dnd-kit/hooks`
- `@octanejs/dnd-kit/sortable`
- `@octanejs/dnd-kit/utilities`

Octane's default `useSortable` plugins retain dnd-kit's keyboard mechanics but
omit `OptimisticSortingPlugin`. That upstream plugin reparents the single host
element before application state commits; doing so can split an Octane keyed
item's owned DOM range. Update list state from the drag events as in the example
above and Octane performs the visible keyed move. An explicit `plugins` array is
still used exactly as supplied.

This package targets the modern dnd-kit API. The legacy `@dnd-kit/core` 6.x
API is not included.