@deadragdoll/reactnu 0.1.73 → 0.1.75

package/docs/API_REFERENCE.md

@@ -46,8 +46,11 @@ See: [Slot Customization](./SLOT_CUSTOMIZATION.md)
 - `useNuIconManager()`
   manages icons inside a `NuIconProvider`
 - `useNuDragDrop()`
-  internal integration hook for custom shared drag sources and targets; most
+  returns the underlying react-dnd manager for advanced integration; most
   applications should use component props from [Shared Drag and Drop](./NuDragDropProvider.md)
+- `useNuDropTarget(element, options)`
+  registers a custom target and returns reactive `isOver`, `canDrop`, and item
+  state; docs: [NuDragDropProvider](./NuDragDropProvider.md)
 - `usePopupMenu()`
   anchor/open helper for `PopupMenu`
 - `useWindowMenu()`

package/docs/GETTING_STARTED.md

@@ -49,7 +49,7 @@ export function App() {
 ## Recommended Order
 
 1. `NuThemeProvider`
-2. `NuDragDropProvider` when ListBox, TreeListView, or IconGrid need to exchange items
+2. `NuDragDropProvider` when ListBox, ListView, TreeListView, or IconGrid need to exchange items
 3. `NuDesktop`
 3. host-driven `appBar`
 4. workspace content

package/docs/IconGrid.md

@@ -72,10 +72,10 @@ function Applications() {
   `onIconMoveOut(icon, context)` runs on the source after a successful transfer.
   `context` exposes both managers, grids, and the target `position`.
 - Within `NuDragDropProvider`, use `acceptsDrop(item)` and `onDrop(item,
-  context)` to accept application-defined items from `ListBox` or
-  `TreeListView`. `onDragOut(item)` runs when an icon is accepted by one of
-  those non-icon targets. The existing `accepts(icon)` API remains specific to
-  icon-to-icon transfers.
+  context)` to accept application-defined items from `ListBox`, `ListView`, or
+  `TreeListView`. Return `{ action: "copy" }` from that target's `onDrop`, or
+  return `false` from `onDragOut(item, result)`, to retain the source icon.
+  The existing `accepts(icon)` API remains specific to icon-to-icon transfers.
 
 `useNuIconManager()`
 

package/docs/ListBox.md

@@ -22,6 +22,7 @@
 - `onItemDoubleClick?: (item, group) => void`
 - `onPopupMenu?: (event, item, group) => void`
 - `getDragItem?: (item, group) => NuDragDropItem | false`
+- `renderDragPreview?: (item, group) => ReactNode`
 - `onItemDragOut?: (item, group) => void`
 - `acceptsDrop?: (item) => boolean`
 - `onDrop?: (item, context) => boolean | void`
@@ -44,3 +45,5 @@
 - Inside `NuDragDropProvider`, `getDragItem` makes rows draggable. The
   application decides accepted data in `acceptsDrop` and updates its collection
   in `onDrop` / `onItemDragOut`.
+- `renderDragPreview(item, group)` may render a compact React preview instead
+  of the full list row while dragging.

package/docs/ListView.md

@@ -40,6 +40,11 @@ const columns: ListViewColumn<Row>[] = [
 - `selectedId`
 - `onRowSelect`
 - `onRowDoubleClick`
+- `getDragItem`
+- `onRowDragOut`
+- `acceptsDrop`
+- `onDrop`
+- `renderDragPreview`
 - `showCheckBox`
 - `checkedIds`
 - `onRowCheckChange`
@@ -50,6 +55,11 @@ const columns: ListViewColumn<Row>[] = [
 - Keyboard navigation follows the same pattern as other list-like controls.
 - Column titles support `&` mnemonic markup.
 - A column can use `field` for simple value rendering or `renderCell` for custom content.
+- `getDragItem(row)` makes a row a shared drag source. `onRowDragOut(row)` runs
+  after another target accepts it; `acceptsDrop` and `onDrop` make the list a
+  target. Wrap related controls in `NuDragDropProvider`.
+- `renderDragPreview(row)` can return a compact React node, rather than using
+  the complete report row as the native drag preview.
 
 ## Imperative Handle
 

package/docs/NuDragDropProvider.md

@@ -1,8 +1,9 @@
 # NuDragDropProvider
 
-`NuDragDropProvider` coordinates pointer drag-and-drop between `NuIconGrid`,
-`ListBox`, and `TreeListView`. It carries an application-defined item; it does
-not mutate the host application's list or tree data.
+`NuDragDropProvider` coordinates native HTML5 drag-and-drop between
+`NuIconGrid`, `ListBox`, `ListView`, and `TreeListView`. It is implemented on
+top of `react-dnd`; it carries an application-defined item and does not mutate
+host list or tree data.
 
 ```tsx
 <NuDragDropProvider>
@@ -34,10 +35,42 @@ not mutate the host application's list or tree data.
   perform its own state update. Returning `false` rejects the transfer.
 - `onItemDragOut` / `onDragOut` run only after a target accepted the item;
   remove or update the source data there.
+- A target may return `{ action: "copy" }` from `onDrop`. `NuIconGrid` then
+  leaves its source icon in place; `{ action: "move" }` is the default. List
+  and tree sources always leave source-data mutation to their host callback.
+- `renderDragPreview` on `ListBox`, `ListView`, and `TreeListView` renders a
+  compact React preview instead of the browser's full-row preview.
 - `NuIconGrid` keeps `accepts(icon)`, `onIconDrop`, and `onIconMoveOut` for
   its existing icon-to-icon transfer. Its `acceptsDrop` and `onDrop` receive
   non-icon shared drag items.
 
-Wrap every source and target that should interact in the same provider. A
-fallback coordinator preserves existing unwrapped IconGrid transfers, but a
-provider gives the application an explicit DnD scope.
+Wrap a workspace once when sources and targets must interact. The controls can
+also mount independently, but one provider gives cross-control dragging and a
+single custom-preview layer an explicit scope.
+
+## Hover feedback
+
+`useNuDropTarget(element, options)` returns reactive `{ isOver, canDrop, item
+}` state. Use it in a custom target to render classic accept/reject feedback;
+`onDragEnter(item, canDrop)` and `onDragLeave(item)` are available when a
+callback fits better.
+
+```tsx
+const [element, setElement] = useState<HTMLDivElement | null>(null);
+const dropState = useNuDropTarget(element, {
+  accepts: (item) => item.type === "receiver",
+  onDrop: (item) => {
+    assignReceiver(item.data);
+  },
+  type: "receiver-group"
+});
+
+<div
+  className={dropState.isOver && dropState.canDrop ? "group group--accept" : "group"}
+  ref={setElement}
+/>;
+```
+
+`NuIconGrid dropTarget` additionally registers a bounded desktop fallback, so
+an icon grid behind managed windows can accept an item dropped anywhere inside
+its own bounds without intercepting normal pointer interaction.

package/docs/TreeListView.md

@@ -44,6 +44,8 @@ const columns: TreeListColumn<Node>[] = [
 ## Key Props
 
 - `columns`
+- `columnStoreKey` — stores user-resized widths under `reactnu.<key>` in
+  `localStorage`
 - `data`
 - `getCellContent`
 - `dataVersion`
@@ -56,6 +58,7 @@ const columns: TreeListColumn<Node>[] = [
 - `onItemDoubleClick`
 - `onPopupMenu`
 - `getDragItem`
+- `renderDragPreview`
 - `onItemDragOut`
 - `acceptsDrop`
 - `onDrop`
@@ -87,6 +90,9 @@ const columns: TreeListColumn<Node>[] = [
 - Columns auto-size from visible content by default.
 - `minWidth` sets a lower bound for auto-sized and resized columns.
 - Columns are resizable unless `resizable={false}` is set on a column.
+- Give `columnStoreKey` a stable, application-owned name to restore a user's
+  resized widths on the next mount. Missing, malformed, or unavailable browser
+  storage falls back to the column definitions without throwing.
 - Right-clicking an enabled row activates it and calls
   `onPopupMenu(event, item, context)`. `context` has the same `depth`, `isLeaf`,
   `item`, and `rowIndex` fields as `getCellContent`; the host owns rendering the
@@ -94,3 +100,5 @@ const columns: TreeListColumn<Node>[] = [
 - Inside `NuDragDropProvider`, rows may produce shared drag items through
   `getDragItem`; the host filters and applies incoming items with
   `acceptsDrop` and `onDrop`.
+- `renderDragPreview(item, context)` may return a compact React preview, such
+  as a name chip, instead of the complete multi-column row.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deadragdoll/reactnu",
-  "version": "0.1.73",
+  "version": "0.1.75",
   "private": false,
   "description": "React components with a precise DOS-era utility interface.",
   "license": "MIT",
@@ -51,5 +51,9 @@
   "peerDependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1"
   }
 }