@deadragdoll/reactnu 0.1.73 → 0.1.75

package/dist/index.js

@@ -734,10 +734,10 @@ function toggleMenuCheckedInTree(items, id) {
 }
 
 // src/appHost/NuAppHostProvider.tsx
-import { useMemo as useMemo5, useState as useState7 } from "react";
+import { useMemo as useMemo4, useState as useState7 } from "react";
 
 // src/windowing/internals/MdiWindowPickerDialog.tsx
-import { useMemo as useMemo4, useState as useState6 } from "react";
+import { useMemo as useMemo3, useState as useState6 } from "react";
 
 // src/components/Button/Button.tsx
 import {
@@ -897,11 +897,11 @@ function Button({
 // src/components/ListBox/ListBox.tsx
 import {
   forwardRef,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useEffect as useEffect4,
   useId,
   useImperativeHandle,
-  useMemo as useMemo3,
+  useMemo as useMemo2,
   useRef as useRef5,
   useState as useState5
 } from "react";
@@ -976,232 +976,179 @@ import { memo } from "react";
 
 // src/components/DragDrop/NuDragDropProvider.tsx
 import {
-  createContext,
+  useCallback as useCallback2,
   useContext,
   useEffect as useEffect3,
-  useMemo as useMemo2,
   useRef as useRef4
 } from "react";
-
-// src/components/_shared/themePortal.ts
-function getThemePortalStyle(anchor) {
-  if (typeof window === "undefined") {
-    return void 0;
-  }
-  const themeRoot = anchor?.closest(".nu-theme-root");
-  if (!themeRoot) {
-    return void 0;
-  }
-  const computed = window.getComputedStyle(themeRoot);
-  const style = {
-    color: computed.color,
-    fontFamily: computed.fontFamily,
-    fontSize: computed.fontSize
+import {
+  DndProvider,
+  DndContext,
+  useDrag,
+  useDragDropManager,
+  useDragLayer,
+  useDrop
+} from "react-dnd";
+import { getEmptyImage, HTML5Backend } from "react-dnd-html5-backend";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var NU_DRAG_ITEM_TYPE = "reactnu-shared-item";
+function getDropContext(item, element, type, clientOffset) {
+  return {
+    clientX: clientOffset?.x ?? 0,
+    clientY: clientOffset?.y ?? 0,
+    source: {
+      element: item.sourceElement ?? element,
+      type: item.sourceType
+    },
+    target: { element, type }
   };
-  for (const propertyName of computed) {
-    if (propertyName.startsWith("--nu-")) {
-      style[propertyName] = computed.getPropertyValue(propertyName).trim();
-    }
-  }
-  return style;
 }
-
-// src/components/DragDrop/NuDragDropProvider.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-var DRAG_THRESHOLD = 3;
-function createDragPreview(sourceElement) {
-  const rect = sourceElement.getBoundingClientRect();
-  const preview = sourceElement.cloneNode(true);
-  preview.removeAttribute("id");
-  preview.setAttribute("aria-hidden", "true");
-  Object.assign(preview.style, {
-    height: `${rect.height}px`,
-    left: `${rect.left}px`,
-    margin: "0",
-    opacity: "0.85",
-    pointerEvents: "none",
-    position: "fixed",
-    top: `${rect.top}px`,
-    width: `${rect.width}px`,
-    zIndex: "2147483647"
-  });
-  const themeStyle = getThemePortalStyle(sourceElement);
-  Object.entries(themeStyle ?? {}).forEach(([property, value]) => {
-    if (value !== void 0) {
-      preview.style.setProperty(property, String(value));
-    }
-  });
-  document.body.append(preview);
-  return preview;
-}
-function createController() {
-  const targets = /* @__PURE__ */ new Map();
-  let activeDrag = null;
-  function findTarget(clientX, clientY) {
-    const elementAtPoint = document.elementFromPoint(clientX, clientY);
-    let candidate = elementAtPoint;
-    while (candidate) {
-      const target = targets.get(candidate);
-      if (target) {
-        return target;
-      }
-      candidate = candidate.parentElement;
-    }
-    return Array.from(targets.values()).reverse().find((target) => {
-      const rect = target.element.getBoundingClientRect();
-      return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
-    });
-  }
-  function clearActiveDrag() {
-    activeDrag?.preview.remove();
-    activeDrag = null;
+function NuDragPreviewLayer() {
+  const { isDragging, item, offset } = useDragLayer((monitor) => ({
+    isDragging: monitor.isDragging(),
+    item: monitor.getItem() ?? null,
+    offset: monitor.getClientOffset()
+  }));
+  if (!isDragging || !item?.preview || !offset) {
+    return null;
   }
-  return {
-    beginDrag(item, sourceElement, sourceType) {
-      clearActiveDrag();
-      activeDrag = {
-        item,
-        preview: createDragPreview(sourceElement),
-        sourceElement,
-        sourceType
-      };
-    },
-    cancelDrag: clearActiveDrag,
-    dropAt(clientX, clientY) {
-      const currentDrag = activeDrag;
-      if (!currentDrag) {
-        return false;
-      }
-      const target = findTarget(clientX, clientY);
-      clearActiveDrag();
-      if (!target || target.element === currentDrag.sourceElement) {
-        return false;
-      }
-      if (target.accepts?.(currentDrag.item) === false) {
-        return false;
-      }
-      return target.onDrop(currentDrag.item, {
-        clientX,
-        clientY,
-        source: {
-          element: currentDrag.sourceElement,
-          type: currentDrag.sourceType
-        },
-        target: { element: target.element, type: target.type }
-      }) !== false;
-    },
-    moveDrag(clientX, clientY) {
-      const currentDrag = activeDrag;
-      if (!currentDrag) {
-        return;
-      }
-      const rect = currentDrag.sourceElement.getBoundingClientRect();
-      currentDrag.preview.style.left = `${Math.round(clientX - rect.width / 2)}px`;
-      currentDrag.preview.style.top = `${Math.round(clientY - rect.height / 2)}px`;
-    },
-    registerTarget(element, options) {
-      targets.set(element, { ...options, element });
-      return () => targets.delete(element);
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        left: 0,
+        pointerEvents: "none",
+        position: "fixed",
+        top: 0,
+        transform: `translate(${Math.round(offset.x + 12)}px, ${Math.round(offset.y + 12)}px)`,
+        zIndex: 2147483647
+      },
+      children: item.preview
     }
-  };
+  );
 }
-var fallbackController = createController();
-var NuDragDropContext = createContext(null);
 function NuDragDropProvider({ children }) {
-  const controller = useMemo2(() => createController(), []);
-  return /* @__PURE__ */ jsx10(NuDragDropContext.Provider, { value: controller, children });
+  const { dragDropManager } = useContext(DndContext);
+  if (dragDropManager) {
+    return children;
+  }
+  return /* @__PURE__ */ jsxs6(DndProvider, { backend: HTML5Backend, children: [
+    children,
+    /* @__PURE__ */ jsx10(NuDragPreviewLayer, {})
+  ] });
 }
 function useNuDragDrop() {
-  return useContext(NuDragDropContext) ?? fallbackController;
+  return useDragDropManager();
 }
 function useNuDropTarget(element, options) {
-  const controller = useNuDragDrop();
+  const [{ canDrop, isOver, item }, drop] = useDrop(
+    () => ({
+      accept: NU_DRAG_ITEM_TYPE,
+      canDrop: (dragItem) => options ? options.accepts?.(dragItem) !== false : false,
+      collect: (monitor) => ({
+        canDrop: monitor.canDrop(),
+        isOver: monitor.isOver({ shallow: true }),
+        item: monitor.isOver({ shallow: true }) ? monitor.getItem() ?? null : null
+      }),
+      drop: (dragItem, monitor) => {
+        if (!options || monitor.didDrop()) {
+          return void 0;
+        }
+        const result = options.onDrop(
+          dragItem,
+          getDropContext(
+            dragItem,
+            element ?? dragItem.sourceElement ?? document.body,
+            options.type,
+            monitor.getClientOffset()
+          )
+        );
+        if (result === false) {
+          return { accepted: false };
+        }
+        return {
+          ...typeof result === "object" && result ? result : {},
+          accepted: true
+        };
+      }
+    }),
+    [element, options]
+  );
   useEffect3(() => {
     if (!element || !options) {
+      drop(null);
       return void 0;
     }
-    return controller.registerTarget(element, options);
-  }, [controller, element, options]);
+    drop(element);
+    return () => {
+      drop(null);
+    };
+  }, [drop, element, options]);
+  const previousItemRef = useRef4(null);
+  useEffect3(() => {
+    const previousItem = previousItemRef.current;
+    if (isOver && item && (!previousItem || previousItem !== item)) {
+      options?.onDragEnter?.(item, canDrop);
+    } else if (!isOver && previousItem) {
+      options?.onDragLeave?.(previousItem);
+    }
+    previousItemRef.current = isOver ? item : null;
+  }, [canDrop, isOver, item, options]);
+  return { canDrop, isOver, item };
 }
 function useNuDragSource({
   disabled = false,
   getItem,
   onDropAccepted,
+  renderPreview,
   sourceType
 }) {
-  const controller = useNuDragDrop();
-  const stateRef = useRef4({
-    dragging: false,
-    pointerId: -1,
-    sourceElement: null,
-    startX: 0,
-    startY: 0
-  });
-  const state = stateRef.current;
-  function stop(event, shouldDrop) {
-    if (state.pointerId !== event.pointerId) {
-      return;
-    }
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-    state.pointerId = -1;
-    if (state.dragging && shouldDrop && controller.dropAt(event.clientX, event.clientY)) {
-      onDropAccepted?.();
-    } else if (state.dragging) {
-      controller.cancelDrag();
-    }
-    state.dragging = false;
-    state.sourceElement = null;
-  }
-  return {
-    onPointerCancel(event) {
-      stop(event, false);
-    },
-    onPointerDown(event) {
-      if (disabled || event.button !== 0) {
-        return;
-      }
-      if (event.target instanceof HTMLElement && event.target.closest("button, input, select, textarea, a")) {
-        return;
-      }
-      state.dragging = false;
-      state.pointerId = event.pointerId;
-      state.sourceElement = event.currentTarget;
-      state.startX = event.clientX;
-      state.startY = event.clientY;
-      event.currentTarget.setPointerCapture(event.pointerId);
-    },
-    onPointerMove(event) {
-      if (state.pointerId !== event.pointerId || !state.sourceElement) {
-        return;
-      }
-      if (!state.dragging) {
-        const distance = Math.max(
-          Math.abs(event.clientX - state.startX),
-          Math.abs(event.clientY - state.startY)
-        );
-        if (distance < DRAG_THRESHOLD) {
-          return;
-        }
+  const sourceElementRef = useRef4(null);
+  const [{ isDragging }, drag, preview] = useDrag(
+    () => ({
+      type: NU_DRAG_ITEM_TYPE,
+      canDrag: () => !disabled && Boolean(getItem()),
+      item: () => {
         const item = getItem();
         if (!item) {
-          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-            event.currentTarget.releasePointerCapture(event.pointerId);
-          }
-          state.pointerId = -1;
-          state.sourceElement = null;
-          return;
+          throw new Error("getItem must return a drag item when dragging is enabled.");
         }
-        state.dragging = true;
-        controller.beginDrag(item, state.sourceElement, sourceType);
+        return {
+          ...item,
+          preview: renderPreview?.(item),
+          sourceElement: sourceElementRef.current,
+          sourceType
+        };
+      },
+      end: (_item, monitor) => {
+        const result = monitor.getDropResult();
+        if (monitor.didDrop() && result?.accepted !== false) {
+          onDropAccepted?.(result ?? {});
+        }
+      },
+      collect: (monitor) => ({ isDragging: monitor.isDragging() })
+    }),
+    [disabled, getItem, onDropAccepted, renderPreview, sourceType]
+  );
+  const dragRef = useCallback2(
+    (element) => {
+      if (disabled) {
+        sourceElementRef.current = null;
+        drag(null);
+        return;
       }
-      controller.moveDrag(event.clientX, event.clientY);
+      sourceElementRef.current = element;
+      drag(element);
     },
-    onPointerUp(event) {
-      stop(event, true);
+    [disabled, drag]
+  );
+  useEffect3(() => {
+    if (renderPreview) {
+      preview(getEmptyImage(), { captureDraggingState: true });
     }
-  };
+  }, [preview, renderPreview]);
+  return { dragRef, isDragging };
 }
 
 // src/components/ListBox/internals/ListBoxCheckControl.tsx
@@ -1238,7 +1185,7 @@ function ListBoxCheckControl({
 }
 
 // src/components/ListBox/internals/ListBoxItemView.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function ListBoxItemViewInner({
   group,
   getDragItem,
@@ -1252,6 +1199,7 @@ function ListBoxItemViewInner({
   onDoubleClick,
   onDragOut,
   onToggleCheck,
+  renderDragPreview,
   registerItemRef,
   rightCheckBox,
   uncheckedShape
@@ -1260,6 +1208,7 @@ function ListBoxItemViewInner({
     disabled: item.disabled || !getDragItem,
     getItem: () => getDragItem?.(item, group) ?? false,
     onDropAccepted: () => onDragOut?.(item, group),
+    renderPreview: renderDragPreview ? () => renderDragPreview(item, group) : void 0,
     sourceType: "listbox-item"
   });
   function handleActivate() {
@@ -1289,7 +1238,7 @@ function ListBoxItemViewInner({
       uncheckedShape
     }
   ) : null;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       "aria-disabled": item.disabled || void 0,
@@ -1307,14 +1256,13 @@ function ListBoxItemViewInner({
       onClick: handleActivate,
       onContextMenu: onPopupMenu ? handleContextMenu : void 0,
       onDoubleClick: handleDoubleClick,
-      onPointerCancel: dragSource.onPointerCancel,
-      onPointerDown: dragSource.onPointerDown,
-      onPointerMove: dragSource.onPointerMove,
-      onPointerUp: dragSource.onPointerUp,
-      ref: (node) => registerItemRef(itemId, node),
+      ref: (node) => {
+        registerItemRef(itemId, node);
+        dragSource.dragRef(node);
+      },
       role: "option",
       children: [
-        /* @__PURE__ */ jsxs6("span", { className: "nu-listbox__item-main", children: [
+        /* @__PURE__ */ jsxs7("span", { className: "nu-listbox__item-main", children: [
           rightCheckBox ? null : checkControl,
           renderLabel(item.name, "nu-listbox__item-label")
         ] }),
@@ -1327,7 +1275,7 @@ function ListBoxItemViewInner({
 var ListBoxItemView = memo(ListBoxItemViewInner);
 
 // src/components/ListBox/internals/ListBoxGroupView.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function ListBoxGroupView({
   group,
   groupIndex,
@@ -1337,6 +1285,7 @@ function ListBoxGroupView({
   onActivateItem,
   onDoubleClickItem,
   onItemDragOut,
+  renderDragPreview,
   onPopupMenuItem,
   onToggleItemCheck,
   registerItemRef,
@@ -1345,7 +1294,7 @@ function ListBoxGroupView({
   selectedId,
   uncheckedShape
 }) {
-  return /* @__PURE__ */ jsxs7("div", { className: "nu-listbox__group", role: "group", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "nu-listbox__group", role: "group", children: [
     group.category ? /* @__PURE__ */ jsx13(ListBoxCategoryView, { category: group.category }) : null,
     group.items.map((item, itemIndex) => {
       const itemId = buildListBoxItemId(
@@ -1371,6 +1320,7 @@ function ListBoxGroupView({
           onActivate: onActivateItem,
           onDoubleClick: onDoubleClickItem,
           onDragOut: onItemDragOut,
+          renderDragPreview,
           onPopupMenu: onPopupMenuItem,
           onToggleCheck: onToggleItemCheck,
           registerItemRef,
@@ -1398,6 +1348,7 @@ function ListBoxInner({
   onItemDragOut,
   onItemSelect,
   onDrop,
+  renderDragPreview,
   rightCheckBox = false,
   selectedId,
   uncheckedShape = "box",
@@ -1408,23 +1359,23 @@ function ListBoxInner({
   const [rootElement, setRootElement] = useState5(null);
   const listboxId = useId();
   const itemRefs = useRef5({});
-  const flattenedItems = useMemo3(
+  const flattenedItems = useMemo2(
     () => flattenListBoxData(data, listboxId),
     [data, listboxId]
   );
-  const selectableItems = useMemo3(
+  const selectableItems = useMemo2(
     () => flattenedItems.filter(({ item }) => !item.disabled),
     [flattenedItems]
   );
   const [activeId, setActiveId] = useState5(
     () => getInitialActiveId(selectableItems, selectedId)
   );
-  const dropTargetOptions = useMemo3(
+  const dropTargetOptions = useMemo2(
     () => onDrop ? { accepts: acceptsDrop, onDrop, type: "listbox" } : void 0,
     [acceptsDrop, onDrop]
   );
   useNuDropTarget(rootElement, dropTargetOptions);
-  const setRootRef = useCallback2((node) => {
+  const setRootRef = useCallback3((node) => {
     rootRef.current = node;
     setRootElement(node);
   }, []);
@@ -1437,20 +1388,20 @@ function ListBoxInner({
       block: "nearest"
     });
   }, [resolvedActiveId]);
-  const registerItemRef = useCallback2(
+  const registerItemRef = useCallback3(
     (itemId, node) => {
       itemRefs.current[itemId] = node;
     },
     []
   );
-  const activateItem = useCallback2(
+  const activateItem = useCallback3(
     (item, group, itemId) => {
       setActiveId(itemId);
       onItemSelect?.(item, group);
     },
     [onItemSelect]
   );
-  const activateResolvedItem = useCallback2(
+  const activateResolvedItem = useCallback3(
     (itemId) => {
       if (!itemId) {
         return;
@@ -1464,7 +1415,7 @@ function ListBoxInner({
     },
     [activateItem, selectableItems]
   );
-  const handleItemPopupMenu = useCallback2(
+  const handleItemPopupMenu = useCallback3(
     (event, item, group, itemId) => {
       if (item.disabled || !onPopupMenu) {
         return;
@@ -1504,7 +1455,7 @@ function ListBoxInner({
   function isItemChecked(item) {
     return getListBoxItemChecked(item, checkedIds);
   }
-  const toggleItemCheck = useCallback2(
+  const toggleItemCheck = useCallback3(
     (itemId) => {
       const activeEntry = flattenedItems.find(
         (entry) => entry.itemId === itemId
@@ -1600,6 +1551,7 @@ function ListBoxInner({
           onItemDragOut,
           onPopupMenuItem: handleItemPopupMenu,
           onToggleItemCheck: toggleItemCheck,
+          renderDragPreview,
           registerItemRef,
           resolvedActiveId,
           rightCheckBox,
@@ -1611,7 +1563,10 @@ function ListBoxInner({
     }
   );
 }
-var ListBox = forwardRef(ListBoxInner);
+function ListBoxWithDragDrop(props, ref) {
+  return /* @__PURE__ */ jsx14(NuDragDropProvider, { children: ListBoxInner(props, ref) });
+}
+var ListBox = forwardRef(ListBoxWithDragDrop);
 
 // src/components/Stack/Stack.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
@@ -1663,7 +1618,7 @@ function Stack({
 }
 
 // src/windowing/internals/MdiWindowPickerDialog.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function isPickerEligibleWindow(windowEntry) {
   if (windowEntry.mode === "window") {
     return true;
@@ -1697,7 +1652,7 @@ function MdiWindowPickerDialog({
   onClose,
   windows
 }) {
-  const resolvedWindows = useMemo4(
+  const resolvedWindows = useMemo3(
     () => windows.filter(
       (windowEntry) => isPickerEligibleWindow(windowEntry) && (!domain || windowEntry.domain === domain)
     ),
@@ -1716,7 +1671,7 @@ function MdiWindowPickerDialog({
     onActivateWindow(resolvedSelectedId);
     onClose();
   }
-  return /* @__PURE__ */ jsxs8(Stack, { gap: "md", children: [
+  return /* @__PURE__ */ jsxs9(Stack, { gap: "md", children: [
     /* @__PURE__ */ jsx16(
       ListBox,
       {
@@ -1752,7 +1707,7 @@ function MdiWindowPickerDialog({
         }
       }
     ),
-    /* @__PURE__ */ jsxs8(Stack, { direction: "row", gap: "sm", children: [
+    /* @__PURE__ */ jsxs9(Stack, { direction: "row", gap: "sm", children: [
       /* @__PURE__ */ jsx16(Button, { defaultFocused: true, onClick: handleActivate, children: "Activate" }),
       /* @__PURE__ */ jsx16(Button, { onClick: onClose, variant: "secondary", children: "Cancel" })
     ] })
@@ -1887,8 +1842,8 @@ function resolveMdiMainMenuItems(items, bridge) {
 }
 
 // src/appHost/appHostContext.ts
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var AppHostMenuContext = createContext2(
+import { createContext, useContext as useContext2 } from "react";
+var AppHostMenuContext = createContext(
   null
 );
 function useAppHostMenu() {
@@ -1917,7 +1872,7 @@ function useAppHostMenu() {
 }
 
 // src/appHost/NuAppHostProvider.tsx
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function NuAppHostProvider({
   children,
   renderMenu = true
@@ -1926,11 +1881,11 @@ function NuAppHostProvider({
   const [windowBridge, setWindowBridge] = useState7(
     null
   );
-  const resolvedMainMenu = useMemo5(
+  const resolvedMainMenu = useMemo4(
     () => resolveMdiMainMenuItems(menuState.mainMenu, windowBridge),
     [menuState.mainMenu, windowBridge]
   );
-  const contextValue = useMemo5(
+  const contextValue = useMemo4(
     () => ({
       ...menuState,
       setWindowBridge,
@@ -1938,7 +1893,7 @@ function NuAppHostProvider({
     }),
     [menuState, windowBridge]
   );
-  return /* @__PURE__ */ jsxs9(AppHostMenuContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ jsxs10(AppHostMenuContext.Provider, { value: contextValue, children: [
     renderMenu && hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx18(MainMenu, { items: resolvedMainMenu }) : null,
     children
   ] });
@@ -1947,10 +1902,10 @@ function NuAppHostProvider({
 // src/windowing/NuWindowProvider.tsx
 import {
   Fragment as Fragment3,
-  useCallback as useCallback3,
+  useCallback as useCallback4,
   useContext as useContext7,
   useEffect as useEffect6,
-  useMemo as useMemo7,
+  useMemo as useMemo6,
   useRef as useRef8,
   useState as useState10
 } from "react";
@@ -1960,7 +1915,7 @@ import {
   memo as memo2,
   useContext as useContext5,
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo6,
+  useMemo as useMemo5,
   useRef as useRef6
 } from "react";
 
@@ -1992,7 +1947,7 @@ function StatusBarItem({
 }
 
 // src/components/Window/internals/WindowStatusBar.tsx
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 function WindowStatusBar({
   children,
   onResizeStart,
@@ -2003,7 +1958,7 @@ function WindowStatusBar({
   const hasCustomItems = resolvedChildren.some(
     (child) => typeof child !== "string" && typeof child !== "number"
   );
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "footer",
     {
       className: ["nu-window__status-bar", statusBarClassName].filter(Boolean).join(" "),
@@ -2077,7 +2032,7 @@ function WindowTitleButton({
 }
 
 // src/components/Window/internals/WindowTitleBar.tsx
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 function WindowTitleBar({
   draggable,
   icon,
@@ -2086,7 +2041,7 @@ function WindowTitleBar({
   title
 }) {
   const controlsWidth = titleButtons.length > 0 ? `calc(${titleButtons.length} * 0.95rem + ${Math.max(0, titleButtons.length - 1) * 0.35}rem + 0.7rem)` : "0.45rem";
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "header",
     {
       className: "nu-window__title-bar",
@@ -2155,8 +2110,8 @@ function useWindowTitleButtons({
 }
 
 // src/windowing/windowContext.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var NuWindowContext = createContext3(null);
+import { createContext as createContext2, useContext as useContext3 } from "react";
+var NuWindowContext = createContext2(null);
 function useNuWindowManager() {
   const context = useContext3(NuWindowContext);
   if (!context) {
@@ -2168,8 +2123,8 @@ function useNuWindowManager() {
 }
 
 // src/components/Window/windowMenuContext.ts
-import { createContext as createContext4, useContext as useContext4 } from "react";
-var WindowMenuContext = createContext4(null);
+import { createContext as createContext3, useContext as useContext4 } from "react";
+var WindowMenuContext = createContext3(null);
 function useWindowMenu() {
   const context = useContext4(WindowMenuContext);
   if (!context) {
@@ -2179,7 +2134,7 @@ function useWindowMenu() {
 }
 
 // src/components/Window/Window.tsx
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function getWindowLayerBounds(node) {
   const parentNode = node.parentElement;
   if (!parentNode) {
@@ -2246,7 +2201,7 @@ function WindowInner({
   const isMaximizable = resolvedAspectRatio === void 0 && (maximizable ?? mode === "window");
   const isMinimizable = minimizable ?? mode === "window";
   const isResizable = resizable ?? mode === "window";
-  const mdiBridge = useMemo6(
+  const mdiBridge = useMemo5(
     () => ({
       activateWindow: windowManager?.activateWindow ?? (() => void 0),
       openDialog: windowManager?.openDialog ?? (() => ""),
@@ -2254,7 +2209,7 @@ function WindowInner({
     }),
     [windowManager?.activateWindow, windowManager?.openDialog, windowManager?.windows]
   );
-  const resolvedMainMenu = useMemo6(
+  const resolvedMainMenu = useMemo5(
     () => resolveMdiMainMenuItems(menuState.mainMenu, mdiBridge),
     [menuState.mainMenu, mdiBridge]
   );
@@ -2465,7 +2420,7 @@ function WindowInner({
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
   }
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "section",
     {
       ...props,
@@ -2496,7 +2451,7 @@ function WindowInner({
             className: "nu-window__shadow nu-window__shadow--bottom"
           }
         ),
-        /* @__PURE__ */ jsxs12(WindowMenuContext.Provider, { value: menuState, children: [
+        /* @__PURE__ */ jsxs13(WindowMenuContext.Provider, { value: menuState, children: [
           /* @__PURE__ */ jsx23(
             WindowTitleBar,
             {
@@ -2628,7 +2583,7 @@ function AppBarItem(props) {
 }
 
 // src/windowing/WindowBar.tsx
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function buildWindowBarGroups(items) {
   const groups = [];
   const groupsByDomain = /* @__PURE__ */ new Map();
@@ -2711,7 +2666,7 @@ function WindowBar({ items, onActivateWindow }) {
   }
   return /* @__PURE__ */ jsx25("div", { className: "nu-window-bar", role: "group", "aria-label": "Open windows", children: groups.map((group) => {
     const icon = getGroupIcon(group);
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs14(
       AppBarItem,
       {
         active: group.active,
@@ -2738,7 +2693,7 @@ import {
   useRef as useRef7,
   useState as useState8
 } from "react";
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 function TextField({
   className,
   debounceMs = 0,
@@ -2789,7 +2744,7 @@ function TextField({
     }
     onChange?.(event);
   }
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "label",
     {
       className: cx("nu-text-field", slotClassNames?.root, className),
@@ -2804,7 +2759,7 @@ function TextField({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15(
           "span",
           {
             className: cx("nu-text-field__slot", slotClassNames?.slot),
@@ -2896,7 +2851,7 @@ function NuView({
 }
 
 // src/windowing/dialogHelpers.tsx
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 function getPresetButtons(preset) {
   switch (preset) {
     case "ok-cancel":
@@ -2999,7 +2954,7 @@ function MessageBoxDialogContent({
   const bodyStyle = kind === "error" ? {
     background: "var(--nu-color-button-danger)"
   } : void 0;
-  return /* @__PURE__ */ jsx28(NuView, { padding: "cell", style: bodyStyle, children: /* @__PURE__ */ jsxs15(Stack, { gap: "md", children: [
+  return /* @__PURE__ */ jsx28(NuView, { padding: "cell", style: bodyStyle, children: /* @__PURE__ */ jsxs16(Stack, { gap: "md", children: [
     /* @__PURE__ */ jsx28(
       "div",
       {
@@ -3009,7 +2964,7 @@ function MessageBoxDialogContent({
         children: message
       }
     ),
-    /* @__PURE__ */ jsxs15(Stack, { direction: "row", gap: "sm", justify: "center", children: [
+    /* @__PURE__ */ jsxs16(Stack, { direction: "row", gap: "sm", justify: "center", children: [
       ok ? /* @__PURE__ */ jsx28(
         Button,
         {
@@ -3059,7 +3014,7 @@ function InputBoxDialogContent({
   placeholder
 }) {
   const [value, setValue] = useState9(defaultValue ?? "");
-  return /* @__PURE__ */ jsx28(NuView, { padding: "cell", children: /* @__PURE__ */ jsxs15(Stack, { gap: "md", children: [
+  return /* @__PURE__ */ jsx28(NuView, { padding: "cell", children: /* @__PURE__ */ jsxs16(Stack, { gap: "md", children: [
     /* @__PURE__ */ jsx28(
       TextField,
       {
@@ -3071,7 +3026,7 @@ function InputBoxDialogContent({
         placeholder
       }
     ),
-    /* @__PURE__ */ jsxs15(Stack, { direction: "row", gap: "sm", justify: "center", children: [
+    /* @__PURE__ */ jsxs16(Stack, { direction: "row", gap: "sm", justify: "center", children: [
       /* @__PURE__ */ jsx28(
         Button,
         {
@@ -3095,7 +3050,7 @@ function InputBoxDialogContent({
 }
 
 // src/windowing/NuWindowProvider.tsx
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 function getDefaultWindowStyle(mode, index) {
   const offset = index * 18;
   return {
@@ -3246,11 +3201,11 @@ function NuWindowProvider({
   const [windows, setWindows] = useState10([]);
   const [windowBoundsById, setWindowBoundsById] = useState10({});
   const appHostMenuContext = useContext7(AppHostMenuContext);
-  const nextId = useCallback3(() => {
+  const nextId = useCallback4(() => {
     idRef.current += 1;
     return `nu-window-${idRef.current}`;
   }, []);
-  const closeWindow = useCallback3((id) => {
+  const closeWindow = useCallback4((id) => {
     setWindows((currentWindows) => {
       const closingWindow = currentWindows.find(
         (windowEntry) => windowEntry.id === id
@@ -3278,7 +3233,7 @@ function NuWindowProvider({
       return nextBounds;
     });
   }, []);
-  const updateWindowBounds = useCallback3(
+  const updateWindowBounds = useCallback4(
     (id, bounds) => {
       setWindowBoundsById((currentBounds) => {
         const previousBounds = currentBounds[id];
@@ -3295,7 +3250,7 @@ function NuWindowProvider({
     },
     []
   );
-  const bringToFront = useCallback3((id) => {
+  const bringToFront = useCallback4((id) => {
     setWindows((currentWindows) => {
       const activationChain = getActivationChain(currentWindows, id);
       if (activationChain.length === 0) {
@@ -3311,7 +3266,7 @@ function NuWindowProvider({
       ];
     });
   }, []);
-  const activateWindow = useCallback3((id) => {
+  const activateWindow = useCallback4((id) => {
     setWindows((currentWindows) => {
       const activationChain = getActivationChain(currentWindows, id);
       if (activationChain.length === 0) {
@@ -3332,7 +3287,7 @@ function NuWindowProvider({
       ];
     });
   }, []);
-  const updateWindow = useCallback3(
+  const updateWindow = useCallback4(
     (id, patch) => {
       setWindows(
         (currentWindows) => currentWindows.map((windowEntry) => {
@@ -3352,7 +3307,7 @@ function NuWindowProvider({
     },
     []
   );
-  const updateWindowPosition = useCallback3(
+  const updateWindowPosition = useCallback4(
     (id, position) => {
       setWindows(
         (currentWindows) => currentWindows.map(
@@ -3370,7 +3325,7 @@ function NuWindowProvider({
     },
     []
   );
-  const updateWindowSize = useCallback3(
+  const updateWindowSize = useCallback4(
     (id, width, height) => {
       setWindows(
         (currentWindows) => currentWindows.map(
@@ -3388,11 +3343,11 @@ function NuWindowProvider({
     },
     []
   );
-  const handleWindowSizeChange = useCallback3(
+  const handleWindowSizeChange = useCallback4(
     (id, size) => updateWindowSize(id, size.width, size.height),
     [updateWindowSize]
   );
-  const toggleWindowMinimized = useCallback3((id) => {
+  const toggleWindowMinimized = useCallback4((id) => {
     setWindows(
       (currentWindows) => currentWindows.map(
         (windowEntry) => windowEntry.id === id ? {
@@ -3402,7 +3357,7 @@ function NuWindowProvider({
       )
     );
   }, []);
-  const toggleWindowMaximized = useCallback3((id) => {
+  const toggleWindowMaximized = useCallback4((id) => {
     setWindows(
       (currentWindows) => currentWindows.map((windowEntry) => {
         if (windowEntry.id !== id || !windowEntry.maximizable) {
@@ -3435,7 +3390,7 @@ function NuWindowProvider({
       })
     );
   }, []);
-  const openManagedWindow = useCallback3(
+  const openManagedWindow = useCallback4(
     (definition, mode) => {
       const id = nextId();
       creationOrderRef.current += 1;
@@ -3456,7 +3411,7 @@ function NuWindowProvider({
     },
     [nextId]
   );
-  const closeAll = useCallback3(() => {
+  const closeAll = useCallback4(() => {
     setWindows(
       (currentWindows) => currentWindows.filter((windowEntry) => {
         const canClose = windowEntry.onClose?.(
@@ -3466,15 +3421,15 @@ function NuWindowProvider({
       })
     );
   }, []);
-  const openDialog = useCallback3(
+  const openDialog = useCallback4(
     (definition) => openManagedWindow(definition, "dialog"),
     [openManagedWindow]
   );
-  const openWindow = useCallback3(
+  const openWindow = useCallback4(
     (definition) => openManagedWindow(definition, "window"),
     [openManagedWindow]
   );
-  const showMessageBox = useCallback3(
+  const showMessageBox = useCallback4(
     (options) => new Promise((resolve) => {
       const buttons = getResolvedMessageBoxButtons(options);
       const labels = getResolvedMessageBoxLabels(options);
@@ -3520,7 +3475,7 @@ function NuWindowProvider({
     }),
     [openDialog]
   );
-  const showInputBox = useCallback3(
+  const showInputBox = useCallback4(
     (options) => new Promise((resolve) => {
       let settled = false;
       function resolveOnce(value) {
@@ -3574,11 +3529,11 @@ function NuWindowProvider({
   const activeWindow = activeWindowId ? windows.find((windowEntry) => windowEntry.id === activeWindowId) : void 0;
   const activeActivationGroup = topmostAppModalIndex >= 0 ? void 0 : activeWindow?.activationGroup;
   const hasAppModal = topmostAppModalIndex >= 0;
-  const isWindowActive = useCallback3(
+  const isWindowActive = useCallback4(
     (windowEntry) => windowEntry.id === activeWindowId || activeActivationGroup !== void 0 && windowEntry.activationGroup === activeActivationGroup,
     [activeActivationGroup, activeWindowId]
   );
-  const windowsInfo = useMemo7(
+  const windowsInfo = useMemo6(
     () => [...windows].sort(
       (leftWindow, rightWindow) => leftWindow.creationOrder - rightWindow.creationOrder
     ).map((windowEntry) => ({
@@ -3609,7 +3564,7 @@ function NuWindowProvider({
     })),
     [isWindowActive, windows]
   );
-  const mdiBridge = useMemo7(
+  const mdiBridge = useMemo6(
     () => ({
       activateWindow,
       openDialog,
@@ -3617,7 +3572,7 @@ function NuWindowProvider({
     }),
     [activateWindow, openDialog, windowsInfo]
   );
-  const contextValue = useMemo7(
+  const contextValue = useMemo6(
     () => ({
       activateWindow,
       bringToFront,
@@ -3664,7 +3619,7 @@ function NuWindowProvider({
   useEffect6(() => {
     onAppModalChange?.(hasAppModal);
   }, [hasAppModal, onAppModalChange]);
-  return /* @__PURE__ */ jsx29(NuWindowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs16("div", { className: ["nu-window-host", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsx29(NuWindowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs17("div", { className: ["nu-window-host", className].filter(Boolean).join(" "), children: [
     children,
     /* @__PURE__ */ jsx29("div", { className: "nu-window-layer", children: renderWindows.map((windowEntry) => {
       const isActiveWindow = isWindowActive(windowEntry);
@@ -3695,7 +3650,7 @@ function NuWindowProvider({
         update: handleUpdate
       };
       const content = typeof windowEntry.content === "function" ? windowEntry.content(controls) : windowEntry.content;
-      return /* @__PURE__ */ jsxs16(Fragment3, { children: [
+      return /* @__PURE__ */ jsxs17(Fragment3, { children: [
         isTopmostAppModal ? /* @__PURE__ */ jsx29(
           "div",
           {
@@ -3764,9 +3719,9 @@ function NuWindowProvider({
 }
 
 // src/components/Desktop/Desktop.tsx
-import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 function DesktopWindowRegion({ appBar, children }) {
-  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
     /* @__PURE__ */ jsx30("div", { className: "nu-desktop__workspace", children }),
     appBar ? /* @__PURE__ */ jsx30("div", { className: "nu-desktop__app-bar", children: appBar }) : null
   ] });
@@ -3811,7 +3766,7 @@ function NuDesktopShell({
     appHostContext.mainMenu,
     appHostContext.windowBridge
   );
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       ...props,
@@ -3921,7 +3876,7 @@ function Dashboard({
 
 // src/components/CheckBox/CheckBox.tsx
 import { useId as useId3, useState as useState12 } from "react";
-import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 function CheckBox({
   checked,
   className,
@@ -3948,13 +3903,13 @@ function CheckBox({
     }
     onCheckedChange?.(event.target.checked, event);
   }
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "label",
     {
       className: cx("nu-check-box", slotClassNames?.root, className),
       style: slotStyles?.root,
       children: [
-        /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsxs19(
           "span",
           {
             className: cx("nu-check-box__main", slotClassNames?.main),
@@ -4027,7 +3982,7 @@ function CheckBox({
 import {
   useEffect as useEffect7,
   useId as useId4,
-  useMemo as useMemo8,
+  useMemo as useMemo7,
   useRef as useRef9,
   useState as useState13
 } from "react";
@@ -4183,7 +4138,7 @@ function usePopupPosition({
 }
 
 // src/components/Dropdown/Dropdown.tsx
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 function flattenDropdownOptions(data) {
   const options = [];
   data.forEach((group) => {
@@ -4238,7 +4193,7 @@ function Dropdown({
   const popupRef = useRef9(null);
   const popupListRef = useRef9(null);
   const [open, setOpen] = useState13(false);
-  const options = useMemo8(() => flattenDropdownOptions(data), [data]);
+  const options = useMemo7(() => flattenDropdownOptions(data), [data]);
   const generatedId = useId4();
   const fieldId = `${generatedId}-dropdown`;
   const labelId = `${fieldId}-label`;
@@ -4246,11 +4201,11 @@ function Dropdown({
   const isControlled = value !== void 0;
   const [uncontrolledValue, setUncontrolledValue] = useState13(() => getInitialValue(options, defaultValue));
   const resolvedValue = isControlled ? value : uncontrolledValue;
-  const selectedOption = useMemo8(
+  const selectedOption = useMemo7(
     () => findSelectedOption(options, resolvedValue),
     [options, resolvedValue]
   );
-  const selectableOptions = useMemo8(
+  const selectableOptions = useMemo7(
     () => options.filter((option) => !option.item.disabled),
     [options]
   );
@@ -4349,7 +4304,7 @@ function Dropdown({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       ...props,
@@ -4384,13 +4339,13 @@ function Dropdown({
             },
             style: slotStyles?.trigger,
             type: "button",
-            children: /* @__PURE__ */ jsxs19(
+            children: /* @__PURE__ */ jsxs20(
               "span",
               {
                 className: cx("nu-dropdown__slot", slotClassNames?.slot),
                 style: slotStyles?.slot,
                 children: [
-                  /* @__PURE__ */ jsxs19(
+                  /* @__PURE__ */ jsxs20(
                     "span",
                     {
                       className: cx("nu-dropdown__field", slotClassNames?.field),
@@ -4527,7 +4482,7 @@ function Dropdown({
 }
 
 // src/components/Frame/Frame.tsx
-import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 function Frame({
   children,
   className,
@@ -4548,7 +4503,7 @@ function Frame({
 }) {
   const resolvedTitleContent = titleContent ?? (title ? renderMnemonicText(title) : null);
   const hasTitleShell = Boolean(titleStart || resolvedTitleContent || titleEnd);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "section",
     {
       ...props,
@@ -4565,7 +4520,7 @@ function Frame({
         ...slotStyles?.root
       },
       children: [
-        hasTitleShell ? /* @__PURE__ */ jsxs20(
+        hasTitleShell ? /* @__PURE__ */ jsxs21(
           "span",
           {
             className: cx("nu-frame__title", slotClassNames?.title),
@@ -4669,20 +4624,45 @@ function InfoAccent({
 // src/components/IconGrid/NuIconGrid.tsx
 import {
   useLayoutEffect as useLayoutEffect5,
-  useMemo as useMemo9,
+  useMemo as useMemo8,
   useRef as useRef11,
   useState as useState16
 } from "react";
 
 // src/components/PopupMenu/PopupMenu.tsx
 import {
-  useCallback as useCallback4,
+  useCallback as useCallback5,
   useEffect as useEffect8,
   useLayoutEffect as useLayoutEffect4,
   useRef as useRef10,
   useState as useState14
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
+
+// src/components/_shared/themePortal.ts
+function getThemePortalStyle(anchor) {
+  if (typeof window === "undefined") {
+    return void 0;
+  }
+  const themeRoot = anchor?.closest(".nu-theme-root");
+  if (!themeRoot) {
+    return void 0;
+  }
+  const computed = window.getComputedStyle(themeRoot);
+  const style = {
+    color: computed.color,
+    fontFamily: computed.fontFamily,
+    fontSize: computed.fontSize
+  };
+  for (const propertyName of computed) {
+    if (propertyName.startsWith("--nu-")) {
+      style[propertyName] = computed.getPropertyValue(propertyName).trim();
+    }
+  }
+  return style;
+}
+
+// src/components/PopupMenu/PopupMenu.tsx
 import { jsx as jsx37 } from "react/jsx-runtime";
 function hasVisibleChildren2(item) {
   return Boolean(
@@ -4732,7 +4712,7 @@ function PopupMenu({
   const isControlled = open !== void 0;
   const resolvedOpen = isControlled ? open : uncontrolledOpen;
   const portalRoot = resolvePortalRoot();
-  const setResolvedOpen = useCallback4(
+  const setResolvedOpen = useCallback5(
     (nextOpen) => {
       if (!nextOpen) {
         setActivePath([]);
@@ -4897,8 +4877,8 @@ function usePopupMenu() {
 }
 
 // src/components/IconGrid/iconContext.ts
-import { createContext as createContext5, useContext as useContext9 } from "react";
-var NuIconContext = createContext5(null);
+import { createContext as createContext4, useContext as useContext9 } from "react";
+var NuIconContext = createContext4(null);
 function useNuIconContext() {
   const context = useContext9(NuIconContext);
   if (!context) {
@@ -4914,8 +4894,7 @@ function useNuIconGridContext() {
 }
 
 // src/components/IconGrid/NuIconGrid.tsx
-import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
-var DRAG_THRESHOLD2 = 3;
+import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 var gridRegistrations = /* @__PURE__ */ new Map();
 function clamp2(value, minimum, maximum) {
   return Math.min(Math.max(value, minimum), maximum);
@@ -4926,23 +4905,6 @@ function resolveIconContextMenuItems(source, icon) {
 function resolveGridContextMenuItems(source, manager) {
   return typeof source === "function" ? source(manager) : source ?? [];
 }
-function findGridRegistrationAtPoint(clientX, clientY) {
-  const target = document.elementFromPoint(clientX, clientY);
-  const gridElement = target?.closest(".nu-icon-grid");
-  if (gridElement) {
-    return gridRegistrations.get(gridElement);
-  }
-  if (target?.closest(".nu-window")) {
-    return void 0;
-  }
-  return Array.from(gridRegistrations.values()).reverse().find((registration) => {
-    if (!registration.dropTarget) {
-      return false;
-    }
-    const rect = registration.element.getBoundingClientRect();
-    return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
-  });
-}
 function getTransferredPosition(targetGrid, iconElement, clientX, clientY) {
   const targetRect = targetGrid.getBoundingClientRect();
   const iconRect = iconElement.getBoundingClientRect();
@@ -4964,149 +4926,31 @@ function getTransferredPosition(targetGrid, iconElement, clientX, clientY) {
   };
 }
 function NuIconGridItem({
-  gridElement,
   icon,
-  onDragOut,
-  onIconMoveOut
+  onDragOut
 }) {
   const manager = useNuIconGridContext();
-  const dragDrop = useNuDragDrop();
   const contextMenu = usePopupMenu();
-  const dragStartRef = useRef11(void 0);
-  const isDraggingRef = useRef11(false);
-  const [isDragging, setIsDragging] = useState16(false);
-  const suppressClickRef = useRef11(false);
-  const latestPositionRef = useRef11(icon.position);
   const contextMenuItems = resolveIconContextMenuItems(
     icon.contextMenuItems,
     icon
   );
-  function handlePointerDown(event) {
-    if (event.button !== 0 || icon.disabled) {
-      return;
-    }
-    manager.selectIcon(icon.id);
-    latestPositionRef.current = icon.position;
-    isDraggingRef.current = false;
-    dragStartRef.current = {
-      clientX: event.clientX,
-      clientY: event.clientY,
-      pointerId: event.pointerId,
-      position: icon.position
-    };
-    event.currentTarget.setPointerCapture(event.pointerId);
-  }
-  function handlePointerMove(event) {
-    const dragStart = dragStartRef.current;
-    if (!dragStart || dragStart.pointerId !== event.pointerId || !gridElement) {
-      return;
-    }
-    const deltaX = event.clientX - dragStart.clientX;
-    const deltaY = event.clientY - dragStart.clientY;
-    if (!isDraggingRef.current && Math.max(Math.abs(deltaX), Math.abs(deltaY)) < DRAG_THRESHOLD2) {
-      return;
-    }
-    if (!isDraggingRef.current) {
-      isDraggingRef.current = true;
-      setIsDragging(true);
-      dragDrop.beginDrag(
-        { data: icon, id: icon.id, type: "icon" },
-        event.currentTarget,
-        "icon-grid"
-      );
-    }
-    dragDrop.moveDrag(event.clientX, event.clientY);
-    const gridRect = gridElement.getBoundingClientRect();
-    const iconRect = event.currentTarget.getBoundingClientRect();
-    const position = {
-      x: Math.round(
-        clamp2(
-          dragStart.position.x + deltaX,
-          0,
-          Math.max(0, gridRect.width - iconRect.width)
-        )
-      ),
-      y: Math.round(
-        clamp2(
-          dragStart.position.y + deltaY,
-          0,
-          Math.max(0, gridRect.height - iconRect.height)
-        )
-      )
-    };
-    latestPositionRef.current = position;
-  }
-  function finishDragging(event) {
-    const dragStart = dragStartRef.current;
-    if (!dragStart || dragStart.pointerId !== event.pointerId) {
-      return;
-    }
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-    dragStartRef.current = void 0;
-    if (!isDraggingRef.current) {
-      return;
-    }
-    suppressClickRef.current = true;
-    isDraggingRef.current = false;
-    setIsDragging(false);
-    if (event.type === "pointercancel" || !gridElement) {
-      dragDrop.cancelDrag();
-      return;
-    }
-    if (dragDrop.dropAt(event.clientX, event.clientY)) {
-      manager.removeIcon(icon.id);
-      onDragOut?.({ data: icon, id: icon.id, type: "icon" });
-      return;
-    }
-    const targetRegistration = findGridRegistrationAtPoint(
-      event.clientX,
-      event.clientY
-    );
-    if (!targetRegistration) {
-      return;
-    }
-    if (targetRegistration.element === gridElement) {
-      manager.moveIcon(icon.id, latestPositionRef.current);
-      icon.onPositionChange?.(latestPositionRef.current, {
-        ...icon,
-        position: latestPositionRef.current
-      });
-      return;
-    }
-    if (!targetRegistration.manager.icons.some(
-      (targetIcon) => targetIcon.id === icon.id
-    )) {
-      const position = getTransferredPosition(
-        targetRegistration.element,
-        event.currentTarget,
-        event.clientX,
-        event.clientY
-      );
-      const transferredIcon = { ...icon, position };
-      const context = {
-        position,
-        source: manager,
-        sourceGrid: gridElement,
-        target: targetRegistration.manager,
-        targetGrid: targetRegistration.element
-      };
-      if (targetRegistration.accepts?.(transferredIcon) !== false && targetRegistration.onIconDrop?.(transferredIcon, context) !== false) {
-        targetRegistration.manager.addIcon(transferredIcon);
-        targetRegistration.manager.selectIcon(transferredIcon.id);
-        manager.removeIcon(icon.id);
-        onIconMoveOut?.(transferredIcon, context);
+  const dragSource = useNuDragSource({
+    disabled: icon.disabled,
+    getItem: () => ({ data: icon, id: icon.id, type: "icon" }),
+    onDropAccepted: (result) => {
+      if (result.targetType === "icon-grid") {
         return;
       }
-    }
-  }
+      const dragItem = { data: icon, id: icon.id, type: "icon" };
+      const shouldMove = result.action !== "copy" && onDragOut?.(dragItem, result) !== false;
+      if (shouldMove) {
+        manager.removeIcon(icon.id);
+      }
+    },
+    sourceType: "icon-grid"
+  });
   function handleClick(event) {
-    if (suppressClickRef.current) {
-      suppressClickRef.current = false;
-      event.preventDefault();
-      return;
-    }
     manager.selectIcon(icon.id);
     icon.onClick?.(event);
   }
@@ -5128,23 +4972,20 @@ function NuIconGridItem({
     manager.selectIcon(icon.id);
     contextMenu.openAtElement(event.currentTarget);
   }
-  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
-    /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(Fragment5, { children: [
+    /* @__PURE__ */ jsxs22(
       "button",
       {
         "aria-haspopup": contextMenuItems.length > 0 ? "menu" : void 0,
         className: "nu-icon-grid__icon",
-        "data-dragging": isDragging || void 0,
+        "data-dragging": dragSource.isDragging || void 0,
         "data-selected": manager.selectedIconId === icon.id || void 0,
         disabled: icon.disabled,
         onClick: handleClick,
         onContextMenu: handleContextMenu,
         onDoubleClick: icon.onDoubleClick,
         onKeyDown: handleKeyDown,
-        onPointerDown: handlePointerDown,
-        onPointerMove: handlePointerMove,
-        onPointerUp: finishDragging,
-        onPointerCancel: finishDragging,
+        ref: dragSource.dragRef,
         style: { left: icon.position.x, top: icon.position.y },
         type: "button",
         children: [
@@ -5164,7 +5005,7 @@ function NuIconGridItem({
     )
   ] });
 }
-function NuIconGrid({
+function NuIconGridContent({
   accepts,
   acceptsDrop,
   className,
@@ -5185,19 +5026,93 @@ function NuIconGrid({
   const arrangeIcons = manager.arrangeIcons;
   const setGridSize = manager.setGridSize;
   const contextMenu = usePopupMenu();
-  const contextMenuItems = useMemo9(
+  const contextMenuItems = useMemo8(
     () => resolveGridContextMenuItems(contextMenuItemsSource, manager),
     [contextMenuItemsSource, manager]
   );
-  const sharedDropTargetOptions = useMemo9(
-    () => onDrop ? {
-      accepts: (item) => item.type !== "icon" && acceptsDrop?.(item) !== false,
-      onDrop,
+  const sharedDropTargetOptions = useMemo8(() => {
+    if (!gridElement) {
+      return void 0;
+    }
+    return {
+      accepts: (item) => {
+        if (item.type === "icon") {
+          return accepts?.(item.data) !== false;
+        }
+        return Boolean(onDrop) && acceptsDrop?.(item) !== false;
+      },
+      onDrop: (item, context) => {
+        if (item.type !== "icon") {
+          return onDrop?.(item, context) ?? false;
+        }
+        const sourceGridElement = context.source.element.closest(
+          ".nu-icon-grid"
+        );
+        const sourceRegistration = sourceGridElement ? gridRegistrations.get(sourceGridElement) : void 0;
+        if (!sourceRegistration) {
+          return false;
+        }
+        const sourceIcon = item.data;
+        const position = getTransferredPosition(
+          gridElement,
+          context.source.element,
+          context.clientX,
+          context.clientY
+        );
+        if (sourceRegistration.element === gridElement) {
+          manager.moveIcon(sourceIcon.id, position);
+          sourceIcon.onPositionChange?.(position, {
+            ...sourceIcon,
+            position
+          });
+          return { action: "move", targetType: "icon-grid" };
+        }
+        if (manager.icons.some((targetIcon) => targetIcon.id === sourceIcon.id)) {
+          return false;
+        }
+        const transferredIcon = { ...sourceIcon, position };
+        const dropContext = {
+          position,
+          source: sourceRegistration.manager,
+          sourceGrid: sourceRegistration.element,
+          target: manager,
+          targetGrid: gridElement
+        };
+        if (onIconDrop?.(transferredIcon, dropContext) === false) {
+          return false;
+        }
+        manager.addIcon(transferredIcon);
+        manager.selectIcon(transferredIcon.id);
+        sourceRegistration.manager.removeIcon(sourceIcon.id);
+        sourceRegistration.onIconMoveOut?.(transferredIcon, dropContext);
+        return { action: "move", targetType: "icon-grid" };
+      },
       type: "icon-grid"
-    } : void 0,
-    [acceptsDrop, onDrop]
-  );
+    };
+  }, [accepts, acceptsDrop, gridElement, manager, onDrop, onIconDrop]);
   useNuDropTarget(gridElement, sharedDropTargetOptions);
+  const backgroundDropTargetOptions = useMemo8(() => {
+    if (!dropTarget || !gridElement || !sharedDropTargetOptions) {
+      return void 0;
+    }
+    return {
+      ...sharedDropTargetOptions,
+      onDrop: (item, context) => {
+        const rect = gridElement.getBoundingClientRect();
+        if (context.clientX < rect.left || context.clientX > rect.right || context.clientY < rect.top || context.clientY > rect.bottom) {
+          return false;
+        }
+        return sharedDropTargetOptions.onDrop(item, {
+          ...context,
+          target: { element: gridElement, type: "icon-grid" }
+        });
+      }
+    };
+  }, [dropTarget, gridElement, sharedDropTargetOptions]);
+  useNuDropTarget(
+    dropTarget && typeof document !== "undefined" ? document.body : null,
+    backgroundDropTargetOptions
+  );
   useLayoutEffect5(() => {
     if (!gridElement) {
       return;
@@ -5224,16 +5139,15 @@ function NuIconGrid({
       return;
     }
     gridRegistrations.set(gridElement, {
-      accepts,
-      dropTarget,
       element: gridElement,
       manager,
-      onIconDrop
+      onIconDrop,
+      onIconMoveOut
     });
     return () => {
       gridRegistrations.delete(gridElement);
     };
-  }, [accepts, dropTarget, gridElement, manager, onIconDrop]);
+  }, [gridElement, manager, onIconDrop, onIconMoveOut]);
   function handleContextMenu(event) {
     onContextMenu?.(event);
     if (event.defaultPrevented || contextMenuItems.length === 0) {
@@ -5243,12 +5157,13 @@ function NuIconGrid({
     manager.selectIcon(null);
     contextMenu.openAtPoint(event.clientX, event.clientY, event.currentTarget);
   }
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       ...props,
       "aria-label": props["aria-label"] ?? "Application icons",
       className: ["nu-icon-grid", className].filter(Boolean).join(" "),
+      "data-drop-target": dropTarget || void 0,
       onContextMenu: handleContextMenu,
       onPointerDown: (event) => {
         onPointerDown?.(event);
@@ -5265,10 +5180,8 @@ function NuIconGrid({
         manager.icons.map((icon) => /* @__PURE__ */ jsx38(
           NuIconGridItem,
           {
-            gridElement,
             icon,
-            onDragOut,
-            onIconMoveOut
+            onDragOut
           },
           icon.id
         )),
@@ -5285,11 +5198,14 @@ function NuIconGrid({
     }
   );
 }
+function NuIconGrid(props) {
+  return /* @__PURE__ */ jsx38(NuDragDropProvider, { children: /* @__PURE__ */ jsx38(NuIconGridContent, { ...props }) });
+}
 
 // src/components/IconGrid/NuIconProvider.tsx
 import {
-  useCallback as useCallback5,
-  useMemo as useMemo10,
+  useCallback as useCallback6,
+  useMemo as useMemo9,
   useRef as useRef12,
   useState as useState17
 } from "react";
@@ -5364,7 +5280,7 @@ function NuIconProvider({
     () => getInitialIcons(defaultIcons)
   );
   const [selectedIconId, setSelectedIconId] = useState17(null);
-  const addIcon = useCallback5((definition) => {
+  const addIcon = useCallback6((definition) => {
     const id = definition.id ?? `nu-icon-${++idRef.current}`;
     setIcons((currentIcons) => {
       if (currentIcons.some((icon) => icon.id === id)) {
@@ -5377,18 +5293,18 @@ function NuIconProvider({
     });
     return id;
   }, []);
-  const moveIcon = useCallback5((id, position) => {
+  const moveIcon = useCallback6((id, position) => {
     setIcons(
       (currentIcons) => currentIcons.map(
         (icon) => icon.id === id ? { ...icon, position } : icon
       )
     );
   }, []);
-  const removeIcon = useCallback5((id) => {
+  const removeIcon = useCallback6((id) => {
     setIcons((currentIcons) => currentIcons.filter((icon) => icon.id !== id));
     setSelectedIconId((currentId) => currentId === id ? null : currentId);
   }, []);
-  const updateIcon = useCallback5(
+  const updateIcon = useCallback6(
     (id, patch) => {
       setIcons(
         (currentIcons) => currentIcons.map(
@@ -5402,7 +5318,7 @@ function NuIconProvider({
     },
     []
   );
-  const arrangeIcons = useCallback5((mode = "columns") => {
+  const arrangeIcons = useCallback6((mode = "columns") => {
     setIcons((currentIcons) => {
       const positions = getArrangedPositions(
         currentIcons,
@@ -5415,10 +5331,10 @@ function NuIconProvider({
       }));
     });
   }, []);
-  const setGridSize = useCallback5((size) => {
+  const setGridSize = useCallback6((size) => {
     gridSizeRef.current = size;
   }, []);
-  const contextValue = useMemo10(
+  const contextValue = useMemo9(
     () => ({
       addIcon,
       arrangeIcons,
@@ -5448,12 +5364,12 @@ function NuIconProvider({
 import {
   useEffect as useEffect9,
   useId as useId5,
-  useMemo as useMemo11,
+  useMemo as useMemo10,
   useRef as useRef13,
   useState as useState18
 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 function flattenComboBoxOptions(data) {
   const options = [];
   data.forEach((group) => {
@@ -5503,7 +5419,7 @@ function ComboBox({
   const labelId = `${fieldId}-label`;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const [open, setOpen] = useState18(false);
-  const options = useMemo11(() => flattenComboBoxOptions(data), [data]);
+  const options = useMemo10(() => flattenComboBoxOptions(data), [data]);
   const isValueControlled = value !== void 0;
   const isInputControlled = inputValueProp !== void 0;
   const [uncontrolledValue, setUncontrolledValue] = useState18(() => defaultValue);
@@ -5512,13 +5428,13 @@ function ComboBox({
     () => defaultInputValue ?? initialSelectedOption?.item.name.text ?? ""
   );
   const resolvedValue = isValueControlled ? value : uncontrolledValue;
-  const selectedOption = useMemo11(
+  const selectedOption = useMemo10(
     () => findComboBoxOption(options, resolvedValue),
     [options, resolvedValue]
   );
   const resolvedInputValue = isInputControlled ? inputValueProp ?? "" : uncontrolledInputValue;
   const normalizedFilter = resolvedInputValue.trim().toLowerCase();
-  const filteredData = useMemo11(() => {
+  const filteredData = useMemo10(() => {
     if (!normalizedFilter) {
       return data;
     }
@@ -5529,7 +5445,7 @@ function ComboBox({
       )
     })).filter((group) => group.items.length > 0);
   }, [data, normalizedFilter]);
-  const filteredOptions = useMemo11(
+  const filteredOptions = useMemo10(
     () => flattenComboBoxOptions(filteredData).filter(
       (option) => !option.item.disabled
     ),
@@ -5613,7 +5529,7 @@ function ComboBox({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       ...props,
@@ -5631,13 +5547,13 @@ function ComboBox({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsxs23(
           "span",
           {
             className: cx("nu-combo-box__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsxs22(
+              /* @__PURE__ */ jsxs23(
                 "span",
                 {
                   className: cx("nu-combo-box__field", slotClassNames?.field),
@@ -5776,7 +5692,7 @@ function ComboBox({
 import {
   Fragment as Fragment6
 } from "react";
-import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 var COMMAND_BUTTON_GLYPH_NAMES = /* @__PURE__ */ new Set([
   "check-fill",
   "check-mark",
@@ -5825,8 +5741,8 @@ function CommandButton({
     }
     popupMenu.openFromClick(event);
   }
-  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
-    /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(Fragment6, { children: [
+    /* @__PURE__ */ jsxs24(
       "button",
       {
         ...props,
@@ -5897,7 +5813,7 @@ function CommandButton({
 
 // src/components/CrtGlitch/CrtGlitch.tsx
 import { useEffect as useEffect10, useId as useId6, useRef as useRef14 } from "react";
-import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 var DEFAULT_INTERVAL_MS = 3e3;
 var DEFAULT_DURATION_MS = 2500;
 var DEFAULT_TOP_LEVEL_RATIO = 1 / 3;
@@ -6031,7 +5947,7 @@ function NuCrtGlitch({
       }
     };
   }, [durationMs, enabled, filterId, intervalMs, targetSelector, topLevelRatio]);
-  return /* @__PURE__ */ jsx42("svg", { "aria-hidden": "true", height: "0", style: { position: "absolute" }, width: "0", children: /* @__PURE__ */ jsx42("defs", { children: /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsx42("svg", { "aria-hidden": "true", height: "0", style: { position: "absolute" }, width: "0", children: /* @__PURE__ */ jsx42("defs", { children: /* @__PURE__ */ jsxs25(
     "filter",
     {
       "color-interpolation-filters": "sRGB",
@@ -6103,10 +6019,10 @@ function NuCrtGlitch({
 // src/components/ListView/ListView.tsx
 import {
   forwardRef as forwardRef2,
-  useCallback as useCallback6,
+  useCallback as useCallback7,
   useEffect as useEffect11,
   useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo12,
+  useMemo as useMemo11,
   useRef as useRef15,
   useState as useState19
 } from "react";
@@ -6186,22 +6102,32 @@ function ListViewCheckControl({
 }
 
 // src/components/ListView/internals/ListViewRow.tsx
-import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
 function ListViewRowInner({
   columns,
   isActive,
   isChecked,
   isSelected,
+  getDragItem,
   onActivate,
   onDoubleClick,
+  onDragOut,
   onToggleCheck,
   registerRowRef,
+  renderDragPreview,
   row,
   showCheckBox,
   templateColumns,
   uncheckedShape
 }) {
   const rowId = row.id;
+  const dragSource = useNuDragSource({
+    disabled: row.disabled || !getDragItem,
+    getItem: () => getDragItem?.(row) ?? false,
+    onDropAccepted: () => onDragOut?.(row),
+    renderPreview: renderDragPreview ? () => renderDragPreview(row) : void 0,
+    sourceType: "list-view-row"
+  });
   function handleActivate() {
     if (!row.disabled) {
       onActivate(rowId);
@@ -6217,7 +6143,7 @@ function ListViewRowInner({
   function handleToggleCheck() {
     onToggleCheck(rowId);
   }
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       "aria-disabled": row.disabled || void 0,
@@ -6232,7 +6158,10 @@ function ListViewRowInner({
       id: rowId,
       onClick: handleActivate,
       onDoubleClick: handleDoubleClick,
-      ref: (node) => registerRowRef(rowId, node),
+      ref: (node) => {
+        registerRowRef(rowId, node);
+        dragSource.dragRef(node);
+      },
       role: "row",
       style: {
         "--nu-list-view-columns": templateColumns
@@ -6267,8 +6196,9 @@ function ListViewRowInner({
 var ListViewRow = memo3(ListViewRowInner);
 
 // src/components/ListView/ListView.tsx
-import { jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
 function ListViewInner({
+  acceptsDrop,
   activeRowId: activeRowIdProp,
   checkedIds,
   className,
@@ -6276,18 +6206,23 @@ function ListViewInner({
   data,
   defaultActiveRowId,
   emptyText = "No rows",
+  getDragItem,
   onActiveRowChange,
   onRowCheckChange,
   onRowDoubleClick,
+  onRowDragOut,
   onRowSelect,
+  onDrop,
+  renderDragPreview,
   selectedId,
   showCheckBox = false,
   uncheckedShape = "box",
   ...props
 }, ref) {
   const rootRef = useRef15(null);
+  const [rootElement, setRootElement] = useState19(null);
   const rowRefs = useRef15({});
-  const selectableRows = useMemo12(
+  const selectableRows = useMemo11(
     () => data.filter((row) => !row.disabled),
     [data]
   );
@@ -6297,13 +6232,22 @@ function ListViewInner({
   );
   const activeRowId = activeRowIdProp !== void 0 ? activeRowIdProp : uncontrolledActiveRowId;
   const resolvedActiveRowId = activeRowId && selectableRows.some((row) => row.id === activeRowId) ? activeRowId : getInitialActiveRowId(selectableRows, selectedId);
-  const templateColumns = useMemo12(() => {
+  const templateColumns = useMemo11(() => {
     const checkboxColumn = showCheckBox ? "var(--nu-glyph-cell-size)" : null;
     const dataColumns = columns.map(
       (column) => column.width ?? "minmax(0, 1fr)"
     );
     return [checkboxColumn, ...dataColumns].filter(Boolean).join(" ");
   }, [columns, showCheckBox]);
+  const dropTargetOptions = useMemo11(
+    () => onDrop ? { accepts: acceptsDrop, onDrop, type: "list-view" } : void 0,
+    [acceptsDrop, onDrop]
+  );
+  useNuDropTarget(rootElement, dropTargetOptions);
+  const setRootRef = useCallback7((node) => {
+    rootRef.current = node;
+    setRootElement(node);
+  }, []);
   useEffect11(() => {
     if (!resolvedActiveRowId) {
       return;
@@ -6312,13 +6256,13 @@ function ListViewInner({
       block: "nearest"
     });
   }, [resolvedActiveRowId]);
-  const registerRowRef = useCallback6(
+  const registerRowRef = useCallback7(
     (rowId, node) => {
       rowRefs.current[rowId] = node;
     },
     []
   );
-  const updateActiveRow = useCallback6(
+  const updateActiveRow = useCallback7(
     (row) => {
       if (!isActiveControlled) {
         setUncontrolledActiveRowId(row.id);
@@ -6327,7 +6271,7 @@ function ListViewInner({
     },
     [isActiveControlled, onActiveRowChange]
   );
-  const activateRowId = useCallback6(
+  const activateRowId = useCallback7(
     (rowId) => {
       if (!rowId) {
         return;
@@ -6366,7 +6310,7 @@ function ListViewInner({
   function isRowChecked(row) {
     return getListViewRowChecked(row, checkedIds);
   }
-  const toggleRowCheck = useCallback6(
+  const toggleRowCheck = useCallback7(
     (rowId) => {
       if (!showCheckBox) {
         return;
@@ -6435,18 +6379,18 @@ function ListViewInner({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ...props,
       "aria-activedescendant": resolvedActiveRowId ?? void 0,
       className: ["nu-list-view", className].filter(Boolean).join(" "),
       onKeyDown: handleKeyDown,
-      ref: rootRef,
+      ref: setRootRef,
       role: "grid",
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsxs27(
           "div",
           {
             className: "nu-list-view__header",
@@ -6476,13 +6420,16 @@ function ListViewInner({
           ListViewRow,
           {
             columns,
+            getDragItem,
             isActive: row.id === resolvedActiveRowId,
             isChecked: isRowChecked(row),
             isSelected: row.id === selectedId,
             onActivate: activateRowId,
             onDoubleClick: onRowDoubleClick,
+            onDragOut: onRowDragOut,
             onToggleCheck: toggleRowCheck,
             registerRowRef,
+            renderDragPreview,
             row,
             showCheckBox,
             templateColumns,
@@ -6494,13 +6441,16 @@ function ListViewInner({
     }
   );
 }
-var ListView = forwardRef2(ListViewInner);
+function ListViewWithDragDrop(props, ref) {
+  return /* @__PURE__ */ jsx45(NuDragDropProvider, { children: ListViewInner(props, ref) });
+}
+var ListView = forwardRef2(ListViewWithDragDrop);
 
 // src/components/MaskedField/MaskedField.tsx
 import {
   useEffect as useEffect12,
   useId as useId7,
-  useMemo as useMemo13,
+  useMemo as useMemo12,
   useRef as useRef16,
   useState as useState20
 } from "react";
@@ -6667,7 +6617,7 @@ function getMaskedFieldState(mask, rawValue) {
 }
 
 // src/components/MaskedField/MaskedField.tsx
-import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
 function MaskedField({
   "aria-invalid": ariaInvalid,
   className,
@@ -6700,7 +6650,7 @@ function MaskedField({
     rawResolvedValue
   );
   const resolvedAriaInvalid = ariaInvalid ?? (isInvalid ? true : void 0);
-  const maskInputMode = useMemo13(
+  const maskInputMode = useMemo12(
     () => props.inputMode === void 0 ? getTextMaskInputMode(mask) : void 0,
     [mask, props.inputMode]
   );
@@ -6739,7 +6689,7 @@ function MaskedField({
     }
     onChange?.(event);
   }
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "label",
     {
       className: cx(
@@ -6759,7 +6709,7 @@ function MaskedField({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs27(
+        /* @__PURE__ */ jsxs28(
           "span",
           {
             className: cx("nu-masked-field__slot", slotClassNames?.slot),
@@ -6889,11 +6839,11 @@ function Memo({
 // src/components/PageControl/PageControl.tsx
 import {
   useId as useId8,
-  useMemo as useMemo14,
+  useMemo as useMemo13,
   useRef as useRef17,
   useState as useState22
 } from "react";
-import { jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
 function PageControl({
   activePageId: activePageIdProp,
   className,
@@ -6912,7 +6862,7 @@ function PageControl({
     () => defaultActivePageId ?? pages.find((page) => !page.disabled)?.id ?? pages[0]?.id
   );
   const activePageId = isControlled ? activePageIdProp : uncontrolledActivePageId;
-  const resolvedActivePage = useMemo14(() => {
+  const resolvedActivePage = useMemo13(() => {
     const byId = pages.find(
       (page) => page.id === activePageId && !page.disabled
     );
@@ -6978,7 +6928,7 @@ function PageControl({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       ...props,
@@ -7041,7 +6991,7 @@ function PageControl({
 }
 
 // src/components/Panel/Panel.tsx
-import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
 function Panel({
   children,
   className,
@@ -7052,7 +7002,7 @@ function Panel({
   title,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "section",
     {
       ...props,
@@ -7095,11 +7045,11 @@ function Panel({
 // src/components/PropertyGrid/PropertyGrid.tsx
 import {
   useId as useId9,
-  useMemo as useMemo15,
+  useMemo as useMemo14,
   useRef as useRef18,
   useState as useState23
 } from "react";
-import { jsx as jsx50, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
 function collectGroupIds(entries) {
   const groupIds = /* @__PURE__ */ new Set();
   function visit(nextEntries) {
@@ -7208,22 +7158,22 @@ function PropertyGrid({
 }) {
   const editorIdPrefix = useId9();
   const rowButtonRefs = useRef18({});
-  const groupIds = useMemo15(() => collectGroupIds(entries), [entries]);
+  const groupIds = useMemo14(() => collectGroupIds(entries), [entries]);
   const isExpandedControlled = expandedIdsProp !== void 0;
   const isActiveControlled = activeIdProp !== void 0;
   const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState23(() => getInitialExpandedIds(entries, defaultExpandedIds));
   const resolvedExpandedIds = expandedIdsProp ?? uncontrolledExpandedIds;
-  const expandedIdSet = useMemo15(
+  const expandedIdSet = useMemo14(
     () => new Set(
       resolvedExpandedIds.filter((expandedId) => groupIds.has(expandedId))
     ),
     [groupIds, resolvedExpandedIds]
   );
-  const rows = useMemo15(
+  const rows = useMemo14(
     () => collectVisibleRows(entries, expandedIdSet),
     [entries, expandedIdSet]
   );
-  const interactiveRows = useMemo15(() => collectInteractiveRows(rows), [rows]);
+  const interactiveRows = useMemo14(() => collectInteractiveRows(rows), [rows]);
   const [uncontrolledActiveId, setUncontrolledActiveId] = useState23(() => getInitialActiveId2(interactiveRows, defaultActiveId));
   const requestedActiveId = isActiveControlled ? activeIdProp : uncontrolledActiveId;
   const resolvedActiveId = requestedActiveId && interactiveRows.some((row) => row.id === requestedActiveId) ? requestedActiveId : interactiveRows[0]?.id;
@@ -7360,7 +7310,7 @@ function PropertyGrid({
         }
         if (row.type === "group") {
           const isExpanded = expandedIdSet.has(row.entry.id);
-          return /* @__PURE__ */ jsxs30(
+          return /* @__PURE__ */ jsxs31(
             "div",
             {
               className: "nu-property-grid__row",
@@ -7389,7 +7339,7 @@ function PropertyGrid({
                       "--nu-property-grid-depth": row.depth
                     },
                     type: "button",
-                    children: /* @__PURE__ */ jsxs30("span", { className: "nu-property-grid__lead", children: [
+                    children: /* @__PURE__ */ jsxs31("span", { className: "nu-property-grid__lead", children: [
                       /* @__PURE__ */ jsx50("span", { className: "nu-property-grid__expander", children: /* @__PURE__ */ jsx50(
                         NuGlyph,
                         {
@@ -7407,7 +7357,7 @@ function PropertyGrid({
           );
         }
         const editorId = `${editorIdPrefix}-editor-${row.entry.id}`;
-        return /* @__PURE__ */ jsxs30(
+        return /* @__PURE__ */ jsxs31(
           "div",
           {
             className: "nu-property-grid__row",
@@ -7434,13 +7384,13 @@ function PropertyGrid({
                     "--nu-property-grid-depth": row.depth
                   },
                   type: "button",
-                  children: /* @__PURE__ */ jsxs30("span", { className: "nu-property-grid__lead", children: [
+                  children: /* @__PURE__ */ jsxs31("span", { className: "nu-property-grid__lead", children: [
                     /* @__PURE__ */ jsx50("span", { className: "nu-property-grid__expander-placeholder" }),
                     /* @__PURE__ */ jsx50("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsxs30(
+              /* @__PURE__ */ jsxs31(
                 "div",
                 {
                   className: "nu-property-grid__editor",
@@ -7462,7 +7412,7 @@ function PropertyGrid({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
 function clamp3(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -7486,7 +7436,7 @@ function ProgressBar({
   const clampedValue = clamp3(value, min, safeMax);
   const percent = Math.round((clampedValue - min) / (safeMax - min) * 100);
   const renderedValue = valueRenderer ? valueRenderer(percent, clampedValue, min, safeMax) : `${percent}%`;
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       ...props,
@@ -7506,7 +7456,7 @@ function ProgressBar({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ jsxs31(
+        /* @__PURE__ */ jsxs32(
           "div",
           {
             className: cx("nu-progress-bar__track", slotClassNames?.track),
@@ -7556,7 +7506,7 @@ function ProgressBar({
 
 // src/components/RadioGroup/RadioButton.tsx
 import { useId as useId10, useState as useState24 } from "react";
-import { jsx as jsx52, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
 function RadioButton({
   checked,
   className,
@@ -7580,8 +7530,8 @@ function RadioButton({
     }
     onCheckedChange?.(event.target.checked, event);
   }
-  return /* @__PURE__ */ jsxs32("label", { className: ["nu-radio-button", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs32("span", { className: "nu-radio-button__main", children: [
+  return /* @__PURE__ */ jsxs33("label", { className: ["nu-radio-button", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs33("span", { className: "nu-radio-button__main", children: [
       /* @__PURE__ */ jsx52(
         "input",
         {
@@ -7595,7 +7545,7 @@ function RadioButton({
           type: "radio"
         }
       ),
-      /* @__PURE__ */ jsx52("span", { "aria-hidden": "true", className: "nu-radio-button__control", children: /* @__PURE__ */ jsxs32("span", { className: "nu-radio-button__disc", children: [
+      /* @__PURE__ */ jsx52("span", { "aria-hidden": "true", className: "nu-radio-button__control", children: /* @__PURE__ */ jsxs33("span", { className: "nu-radio-button__disc", children: [
         /* @__PURE__ */ jsx52(NuGlyph, { className: "nu-radio-button__ring", name: "radio-ring" }),
         resolvedChecked ? /* @__PURE__ */ jsx52(NuGlyph, { className: "nu-radio-button__fill", name: "radio-fill" }) : null
       ] }) }),
@@ -7607,7 +7557,7 @@ function RadioButton({
 
 // src/components/RadioGroup/RadioGroup.tsx
 import { useId as useId11, useState as useState25 } from "react";
-import { jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs34 } from "react/jsx-runtime";
 function RadioGroup({
   className,
   defaultValue,
@@ -7634,7 +7584,7 @@ function RadioGroup({
     }
     onValueChange?.(nextValue);
   }
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "fieldset",
     {
       ...props,
@@ -7714,12 +7664,12 @@ function ReportCell({
 import {
   useEffect as useEffect13,
   useId as useId12,
-  useMemo as useMemo16,
+  useMemo as useMemo15,
   useRef as useRef19,
   useState as useState26
 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs35 } from "react/jsx-runtime";
 function resolveSearchBoxPortalRoot() {
   return document.body;
 }
@@ -7764,7 +7714,7 @@ function SearchBox({
   const [selectedValue, setSelectedValue] = useState26(null);
   const normalizedQuery = (isQueryControlled ? queryProp : uncontrolledQuery) ?? "";
   const trimmedQuery = normalizedQuery.trim();
-  const resultOptions = useMemo16(() => {
+  const resultOptions = useMemo15(() => {
     return results.map((item, index) => ({
       item,
       listBoxItem: {
@@ -7778,7 +7728,7 @@ function SearchBox({
       value: getItemId(item, index)
     }));
   }, [getItemDetails, getItemDisabled, getItemId, getItemText, results]);
-  const listBoxData = useMemo16(
+  const listBoxData = useMemo15(
     () => [
       {
         category: null,
@@ -7914,7 +7864,7 @@ function SearchBox({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       ...props,
@@ -7923,7 +7873,7 @@ function SearchBox({
       style,
       children: [
         /* @__PURE__ */ jsx55("label", { className: "nu-search-box__label", htmlFor: fieldId, id: labelId, children: renderMnemonicText(label) }),
-        /* @__PURE__ */ jsxs34("span", { className: "nu-search-box__slot", ref: fieldRef, children: [
+        /* @__PURE__ */ jsxs35("span", { className: "nu-search-box__slot", ref: fieldRef, children: [
           /* @__PURE__ */ jsx55("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "[" }),
           /* @__PURE__ */ jsx55("span", { className: "nu-search-box__input-shell", children: /* @__PURE__ */ jsx55(
             "input",
@@ -7974,10 +7924,10 @@ function SearchBox({
 // src/components/SpinBox/SpinBox.tsx
 import {
   useId as useId13,
-  useMemo as useMemo17,
+  useMemo as useMemo16,
   useState as useState27
 } from "react";
-import { jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs36 } from "react/jsx-runtime";
 function clampSpinValue(value, min, max) {
   let nextValue = value;
   if (min !== void 0) {
@@ -8082,15 +8032,15 @@ function SpinBox({
     }
     onKeyDown?.(event);
   }
-  const decrementDisabled = useMemo17(
+  const decrementDisabled = useMemo16(
     () => disabled || min !== void 0 && numericValue <= min,
     [disabled, min, numericValue]
   );
-  const incrementDisabled = useMemo17(
+  const incrementDisabled = useMemo16(
     () => disabled || max !== void 0 && numericValue >= max,
     [disabled, max, numericValue]
   );
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "label",
     {
       className: cx("nu-spin-box", slotClassNames?.root, className),
@@ -8105,7 +8055,7 @@ function SpinBox({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs35(
+        /* @__PURE__ */ jsxs36(
           "span",
           {
             className: cx("nu-spin-box__slot", slotClassNames?.slot),
@@ -8153,7 +8103,7 @@ function SpinBox({
                   children: "]"
                 }
               ),
-              /* @__PURE__ */ jsxs35(
+              /* @__PURE__ */ jsxs36(
                 "span",
                 {
                   className: cx("nu-spin-box__controls", slotClassNames?.controls),
@@ -8208,7 +8158,7 @@ import {
   useRef as useRef20,
   useState as useState28
 } from "react";
-import { jsx as jsx57, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs37 } from "react/jsx-runtime";
 function clamp4(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -8363,7 +8313,7 @@ function Splitter({
       commitValue(max);
     }
   }
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       ...props,
@@ -8409,11 +8359,11 @@ function Splitter({
 import {
   useEffect as useEffect15,
   useId as useId15,
-  useMemo as useMemo18,
+  useMemo as useMemo17,
   useRef as useRef21,
   useState as useState29
 } from "react";
-import { jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs38 } from "react/jsx-runtime";
 function clamp5(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -8463,7 +8413,7 @@ function TickBar({
   const trackRef = useRef21(null);
   const resolvedValue = isControlled ? clamp5(snapToStep(value ?? initialValue, min, safeStep), min, safeMax) : uncontrolledValue;
   const ratio = safeMax === min ? 0 : (resolvedValue - min) / (safeMax - min);
-  const derivedTickCount = useMemo18(() => {
+  const derivedTickCount = useMemo17(() => {
     if (tickCount !== void 0) {
       return Math.max(2, tickCount);
     }
@@ -8549,7 +8499,7 @@ function TickBar({
     }
     onKeyDown?.(event);
   }
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       ...props,
@@ -8570,13 +8520,13 @@ function TickBar({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ jsxs37(
+        /* @__PURE__ */ jsxs38(
           "div",
           {
             className: cx("nu-tick-bar__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsxs37(
+              /* @__PURE__ */ jsxs38(
                 "div",
                 {
                   "aria-describedby": hintId,
@@ -8685,7 +8635,7 @@ function TickBar({
 }
 
 // src/components/ToolBar/ToolBar.tsx
-import { jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs39 } from "react/jsx-runtime";
 function ToolBar({
   children,
   className,
@@ -8697,7 +8647,7 @@ function ToolBar({
   wrap = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       ...props,
@@ -8794,11 +8744,11 @@ function ToolSeparator({ className, ...props }) {
 // src/components/TreeView/TreeView.tsx
 import {
   forwardRef as forwardRef3,
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useEffect as useEffect16,
   useId as useId16,
   useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo19,
+  useMemo as useMemo18,
   useRef as useRef22,
   useState as useState30
 } from "react";
@@ -8898,7 +8848,7 @@ function collectVisibleTreeItems(items, expandedIds, depth = 0, guideMask = [],
 
 // src/components/TreeView/internals/TreeViewItem.tsx
 import { memo as memo4 } from "react";
-import { jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs40 } from "react/jsx-runtime";
 function areTreeViewGuideArraysEqual(previousArray, nextArray) {
   if (previousArray.length !== nextArray.length) {
     return false;
@@ -8972,8 +8922,8 @@ function TreeViewItemInner({
     handleActivate();
     onToggleItemCheck?.(item, !isChecked);
   }
-  return /* @__PURE__ */ jsxs39("div", { className: "nu-tree-view__row", role: "none", children: [
-    /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40("div", { className: "nu-tree-view__row", role: "none", children: [
+    /* @__PURE__ */ jsxs40(
       "div",
       {
         "aria-checked": isCheckable ? isChecked : void 0,
@@ -8992,7 +8942,7 @@ function TreeViewItemInner({
         ref: (node) => registerItemRef(itemId, node),
         role: "treeitem",
         children: [
-          /* @__PURE__ */ jsxs39("span", { "aria-hidden": "true", className: "nu-tree-view__prefix", children: [
+          /* @__PURE__ */ jsxs40("span", { "aria-hidden": "true", className: "nu-tree-view__prefix", children: [
             guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx60(
               "span",
               {
@@ -9004,7 +8954,7 @@ function TreeViewItemInner({
               },
               `${itemId}-guide-${guideIndex}`
             )),
-            /* @__PURE__ */ jsxs39(
+            /* @__PURE__ */ jsxs40(
               "span",
               {
                 className: "nu-tree-view__lead",
@@ -9052,7 +9002,7 @@ function TreeViewItemInner({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs39("span", { className: "nu-tree-view__content", children: [
+          /* @__PURE__ */ jsxs40("span", { className: "nu-tree-view__content", children: [
             isCheckable ? /* @__PURE__ */ jsx60("span", { className: "nu-tree-view__check-slot", children: /* @__PURE__ */ jsx60(
               "button",
               {
@@ -9148,15 +9098,15 @@ function TreeViewInner({
   });
   const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState30(null);
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
-  const expandedIdSet = useMemo19(
+  const expandedIdSet = useMemo18(
     () => new Set(resolvedExpandedIds),
     [resolvedExpandedIds]
   );
-  const visibleItems = useMemo19(
+  const visibleItems = useMemo18(
     () => collectVisibleTreeItems(data, expandedIdSet),
     [data, expandedIdSet]
   );
-  const selectableItems = useMemo19(
+  const selectableItems = useMemo18(
     () => visibleItems.filter(({ item }) => !item.disabled),
     [visibleItems]
   );
@@ -9172,13 +9122,13 @@ function TreeViewInner({
       block: "nearest"
     });
   }, [resolvedActiveId]);
-  const registerItemRef = useCallback7(
+  const registerItemRef = useCallback8(
     (itemId, node) => {
       itemRefs.current[itemId] = node;
     },
     []
   );
-  const setExpandedState = useCallback7(
+  const setExpandedState = useCallback8(
     (item, nextExpanded) => {
       const nextExpandedIds = nextExpanded ? Array.from(/* @__PURE__ */ new Set([...resolvedExpandedIds, item.id])) : resolvedExpandedIds.filter((expandedId) => expandedId !== item.id);
       if (!isExpandedControlled) {
@@ -9188,7 +9138,7 @@ function TreeViewInner({
     },
     [isExpandedControlled, onExpandedIdsChange, resolvedExpandedIds]
   );
-  const activateEntry = useCallback7(
+  const activateEntry = useCallback8(
     (item, itemId) => {
       if (item.disabled) {
         return;
@@ -9201,7 +9151,7 @@ function TreeViewInner({
     },
     [onItemSelect, selectedId]
   );
-  const activateResolvedItem = useCallback7(
+  const activateResolvedItem = useCallback8(
     (itemId) => {
       if (!itemId) {
         return;
@@ -9410,12 +9360,12 @@ var TreeView = forwardRef3(TreeViewInner);
 // src/components/TreeListView/TreeListView.tsx
 import {
   forwardRef as forwardRef4,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useEffect as useEffect17,
   useId as useId17,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo20,
+  useMemo as useMemo19,
   useRef as useRef23,
   useState as useState31
 } from "react";
@@ -9508,9 +9458,9 @@ function renderTreeListCellValue(item, column) {
 
 // src/components/TreeListView/internals/TreeListViewRow.tsx
 import { memo as memo5 } from "react";
-import { Fragment as Fragment7, jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
 function renderTreeTitleContent(item) {
-  return /* @__PURE__ */ jsxs40(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs41(Fragment7, { children: [
     /* @__PURE__ */ jsx62("span", { className: "nu-tree-list-view__title", children: item.title }),
     item.hint ? /* @__PURE__ */ jsx62("span", { className: "nu-tree-list-view__hint", children: item.hint }) : null
   ] });
@@ -9560,6 +9510,7 @@ function TreeListViewRowInner({
   onActivateItem,
   onDoubleClickItem,
   onItemDragOut,
+  renderDragPreview,
   onPopupMenuItem,
   onToggleItemCheck,
   onToggleItemExpanded,
@@ -9591,6 +9542,7 @@ function TreeListViewRowInner({
     disabled: item.disabled || !getDragItem,
     getItem: () => getDragItem?.(item, dragContext) ?? false,
     onDropAccepted: () => onItemDragOut?.(item, dragContext),
+    renderPreview: renderDragPreview ? () => renderDragPreview(item, dragContext) : void 0,
     sourceType: "tree-list-item"
   });
   function handleActivate() {
@@ -9638,7 +9590,7 @@ function TreeListViewRowInner({
     handleActivate();
     onToggleItemCheck?.(item, !isChecked);
   }
-  return /* @__PURE__ */ jsxs40(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs41(Fragment7, { children: [
     /* @__PURE__ */ jsx62(
       "div",
       {
@@ -9657,17 +9609,16 @@ function TreeListViewRowInner({
         onClick: handleActivate,
         onContextMenu: onPopupMenuItem ? handleContextMenu : void 0,
         onDoubleClick: handleDoubleClick,
-        onPointerCancel: dragSource.onPointerCancel,
-        onPointerDown: dragSource.onPointerDown,
-        onPointerMove: dragSource.onPointerMove,
-        onPointerUp: dragSource.onPointerUp,
-        ref: (node) => registerItemRef(itemId, node),
+        ref: (node) => {
+          registerItemRef(itemId, node);
+          dragSource.dragRef(node);
+        },
         role: "row",
         style: {
           "--nu-tree-list-view-columns": templateColumns
         },
         children: columns.map(
-          (column, columnIndex) => column.id === treeColumnId ? /* @__PURE__ */ jsxs40(
+          (column, columnIndex) => column.id === treeColumnId ? /* @__PURE__ */ jsxs41(
             "span",
             {
               className: [
@@ -9679,7 +9630,7 @@ function TreeListViewRowInner({
               "data-column-id": column.id,
               role: "gridcell",
               children: [
-                /* @__PURE__ */ jsxs40("span", { "aria-hidden": "true", className: "nu-tree-list-view__prefix", children: [
+                /* @__PURE__ */ jsxs41("span", { "aria-hidden": "true", className: "nu-tree-list-view__prefix", children: [
                   guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx62(
                     "span",
                     {
@@ -9691,7 +9642,7 @@ function TreeListViewRowInner({
                     },
                     `${itemId}-guide-${guideIndex}`
                   )),
-                  /* @__PURE__ */ jsxs40(
+                  /* @__PURE__ */ jsxs41(
                     "span",
                     {
                       className: "nu-tree-list-view__lead",
@@ -9739,7 +9690,7 @@ function TreeListViewRowInner({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs40("span", { className: "nu-tree-list-view__tree-content", children: [
+                /* @__PURE__ */ jsxs41("span", { className: "nu-tree-list-view__tree-content", children: [
                   isCheckable ? /* @__PURE__ */ jsx62("span", { className: "nu-tree-list-view__check-slot", children: /* @__PURE__ */ jsx62(
                     "button",
                     {
@@ -9840,12 +9791,43 @@ var TreeListViewRow = memo5(
 );
 
 // src/components/TreeListView/TreeListView.tsx
-import { jsx as jsx63, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
+function getColumnStorageKey(columnStoreKey) {
+  const normalizedKey = columnStoreKey?.trim();
+  return normalizedKey ? `reactnu.${normalizedKey}` : null;
+}
+function readStoredColumnWidths(storageKey, columns) {
+  if (!storageKey || typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const rawValue = window.localStorage.getItem(storageKey);
+    if (!rawValue) {
+      return {};
+    }
+    const parsedValue = JSON.parse(rawValue);
+    if (!parsedValue || typeof parsedValue !== "object") {
+      return {};
+    }
+    return Object.fromEntries(
+      columns.flatMap((column) => {
+        const width = parsedValue[column.id];
+        if (typeof width !== "number" || !Number.isFinite(width)) {
+          return [];
+        }
+        return [[column.id, Math.max(width, column.minWidth ?? 0)]];
+      })
+    );
+  } catch {
+    return {};
+  }
+}
 function TreeListViewInner({
   acceptsDrop,
   activeItemId: activeItemIdProp,
   checkedIds,
   className,
+  columnStoreKey,
   columns,
   onPopupMenu,
   data,
@@ -9861,6 +9843,7 @@ function TreeListViewInner({
   onItemCheckChange,
   onItemDoubleClick,
   onItemDragOut,
+  renderDragPreview,
   onItemSelect,
   onDrop,
   selectedId,
@@ -9870,6 +9853,9 @@ function TreeListViewInner({
   const rootRef = useRef23(null);
   const [rootElement, setRootElement] = useState31(null);
   const treeId = useId17();
+  const storageKey = getColumnStorageKey(columnStoreKey);
+  const loadedStorageKeyRef = useRef23(storageKey);
+  const shouldPersistColumnWidthsRef = useRef23(false);
   const itemRefs = useRef23({});
   const resizeFrameRef = useRef23(null);
   const resizeStateRef = useRef23(null);
@@ -9883,18 +9869,18 @@ function TreeListViewInner({
   });
   const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState31(null);
   const [autoColumnWidths, setAutoColumnWidths] = useState31({});
-  const [userColumnWidths, setUserColumnWidths] = useState31({});
+  const [userColumnWidths, setUserColumnWidths] = useState31(() => readStoredColumnWidths(storageKey, columns));
   const isActiveControlled = activeItemIdProp !== void 0;
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
-  const expandedIdSet = useMemo20(
+  const expandedIdSet = useMemo19(
     () => new Set(resolvedExpandedIds),
     [resolvedExpandedIds]
   );
-  const visibleItems = useMemo20(
+  const visibleItems = useMemo19(
     () => collectVisibleTreeListItems(data, expandedIdSet),
     [data, expandedIdSet]
   );
-  const selectableItems = useMemo20(
+  const selectableItems = useMemo19(
     () => visibleItems.filter(({ item }) => !item.disabled),
     [visibleItems]
   );
@@ -9903,7 +9889,7 @@ function TreeListViewInner({
   const [uncontrolledActiveItemId, setUncontrolledActiveItemId] = useState31(() => defaultActiveItemId ?? resolvedSelectedId);
   const activeItemId = activeItemIdProp !== void 0 ? activeItemIdProp : uncontrolledActiveItemId;
   const resolvedActiveItemId = activeItemId && selectableItems.some((entry) => entry.itemId === activeItemId) ? activeItemId : resolvedSelectedId;
-  const minColumnWidthById = useMemo20(
+  const minColumnWidthById = useMemo19(
     () => Object.fromEntries(
       columns.map(
         (column) => [column.id, column.minWidth ?? 0]
@@ -9911,29 +9897,29 @@ function TreeListViewInner({
     ),
     [columns]
   );
-  const templateColumns = useMemo20(
+  const templateColumns = useMemo19(
     () => getTreeListTemplateColumns(columns, {
       autoColumnWidths,
       userColumnWidths
     }),
     [autoColumnWidths, columns, userColumnWidths]
   );
-  const treeColumnId = useMemo20(
+  const treeColumnId = useMemo19(
     () => getTreeListTreeColumnId(columns),
     [columns]
   );
-  const rowIndexMap = useMemo20(
+  const rowIndexMap = useMemo19(
     () => new Map(
       visibleItems.map((entry, index) => [entry.itemId, index])
     ),
     [visibleItems]
   );
-  const dropTargetOptions = useMemo20(
+  const dropTargetOptions = useMemo19(
     () => onDrop ? { accepts: acceptsDrop, onDrop, type: "tree-list" } : void 0,
     [acceptsDrop, onDrop]
   );
   useNuDropTarget(rootElement, dropTargetOptions);
-  const setRootRef = useCallback8((node) => {
+  const setRootRef = useCallback9((node) => {
     rootRef.current = node;
     setRootElement(node);
   }, []);
@@ -9945,17 +9931,38 @@ function TreeListViewInner({
       block: "nearest"
     });
   }, [resolvedActiveItemId]);
-  const registerItemRef = useCallback8(
+  useEffect17(() => {
+    if (loadedStorageKeyRef.current === storageKey) {
+      return;
+    }
+    loadedStorageKeyRef.current = storageKey;
+    shouldPersistColumnWidthsRef.current = false;
+    setUserColumnWidths(readStoredColumnWidths(storageKey, columns));
+  }, [columns, storageKey]);
+  useEffect17(() => {
+    if (!shouldPersistColumnWidthsRef.current) {
+      return;
+    }
+    shouldPersistColumnWidthsRef.current = false;
+    if (!storageKey || typeof window === "undefined") {
+      return;
+    }
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(userColumnWidths));
+    } catch {
+    }
+  }, [storageKey, userColumnWidths]);
+  const registerItemRef = useCallback9(
     (itemId, node) => {
       itemRefs.current[itemId] = node;
     },
     []
   );
-  const resolveCellContent = useCallback8(
+  const resolveCellContent = useCallback9(
     (...args) => getCellContent?.(...args),
     [getCellContent]
   );
-  const handleItemDoubleClick = useCallback8(
+  const handleItemDoubleClick = useCallback9(
     (item) => onItemDoubleClick?.(item),
     [onItemDoubleClick]
   );
@@ -9998,7 +10005,7 @@ function TreeListViewInner({
       }
     };
   }, []);
-  const setExpandedState = useCallback8(
+  const setExpandedState = useCallback9(
     (item, nextExpanded) => {
       const nextExpandedIds = nextExpanded ? Array.from(/* @__PURE__ */ new Set([...resolvedExpandedIds, item.id])) : resolvedExpandedIds.filter((expandedId) => expandedId !== item.id);
       if (!isExpandedControlled) {
@@ -10008,7 +10015,7 @@ function TreeListViewInner({
     },
     [isExpandedControlled, onExpandedIdsChange, resolvedExpandedIds]
   );
-  const updateActiveItem = useCallback8(
+  const updateActiveItem = useCallback9(
     (item) => {
       if (!isActiveControlled) {
         setUncontrolledActiveItemId(item.id);
@@ -10017,7 +10024,7 @@ function TreeListViewInner({
     },
     [isActiveControlled, onActiveItemChange]
   );
-  const activateEntry = useCallback8(
+  const activateEntry = useCallback9(
     (item, itemId) => {
       if (item.disabled) {
         return;
@@ -10030,7 +10037,7 @@ function TreeListViewInner({
     },
     [onItemSelect, selectedId, updateActiveItem]
   );
-  const handleItemPopupMenu = useCallback8(
+  const handleItemPopupMenu = useCallback9(
     (event, item, context) => {
       if (item.disabled || !onPopupMenu) {
         return;
@@ -10042,7 +10049,7 @@ function TreeListViewInner({
     },
     [activateEntry, onPopupMenu]
   );
-  const activateResolvedItem = useCallback8(
+  const activateResolvedItem = useCallback9(
     (itemId) => {
       if (!itemId) {
         return;
@@ -10056,7 +10063,7 @@ function TreeListViewInner({
     },
     [activateEntry, selectableItems]
   );
-  const handleItemCheckChange = useCallback8(
+  const handleItemCheckChange = useCallback9(
     (item, checked) => {
       onItemCheckChange?.(item, checked);
     },
@@ -10126,7 +10133,7 @@ function TreeListViewInner({
   function isItemChecked(item) {
     return checkedIds ? checkedIds.includes(item.id) : item.checked === true;
   }
-  const toggleItemCheck = useCallback8(
+  const toggleItemCheck = useCallback9(
     (itemId) => {
       const item = findTreeListItemById(data, itemId);
       if (!item || item.disabled || item.checked === void 0 && checkedIds === void 0) {
@@ -10235,9 +10242,15 @@ function TreeListViewInner({
       return;
     }
     setUserColumnWidths(
-      (currentWidths) => currentWidths[resizeState.columnId] === resizeState.nextWidth ? currentWidths : {
-        ...currentWidths,
-        [resizeState.columnId]: resizeState.nextWidth
+      (currentWidths) => {
+        if (currentWidths[resizeState.columnId] === resizeState.nextWidth) {
+          return currentWidths;
+        }
+        shouldPersistColumnWidthsRef.current = true;
+        return {
+          ...currentWidths,
+          [resizeState.columnId]: resizeState.nextWidth
+        };
       }
     );
   }
@@ -10284,7 +10297,7 @@ function TreeListViewInner({
     window.addEventListener("pointermove", handleColumnResizeMove);
     window.addEventListener("pointerup", handleColumnResizeEnd);
   }
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     "div",
     {
       ...props,
@@ -10304,7 +10317,7 @@ function TreeListViewInner({
             style: {
               "--nu-tree-list-view-columns": templateColumns
             },
-            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs41(
+            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs42(
               "span",
               {
                 className: [
@@ -10349,6 +10362,7 @@ function TreeListViewInner({
             onActivateItem: activateEntry,
             onDoubleClickItem: onItemDoubleClick ? handleItemDoubleClick : void 0,
             onItemDragOut,
+            renderDragPreview,
             onPopupMenuItem: handleItemPopupMenu,
             onToggleItemCheck: handleItemCheckChange,
             onToggleItemExpanded: setExpandedState,
@@ -10367,13 +10381,16 @@ function TreeListViewInner({
     }
   );
 }
-var TreeListView = forwardRef4(TreeListViewInner);
+function TreeListViewWithDragDrop(props, ref) {
+  return /* @__PURE__ */ jsx63(NuDragDropProvider, { children: TreeListViewInner(props, ref) });
+}
+var TreeListView = forwardRef4(TreeListViewWithDragDrop);
 
 // src/theme/NuThemeProvider.tsx
 import {
-  useCallback as useCallback9,
+  useCallback as useCallback10,
   useId as useId18,
-  useMemo as useMemo21,
+  useMemo as useMemo20,
   useState as useState32
 } from "react";
 
@@ -10656,8 +10673,8 @@ function getNuDesktopPatternStyle(mode) {
 }
 
 // src/theme/themeContext.ts
-import { createContext as createContext6, useContext as useContext10 } from "react";
-var NuThemeContext = createContext6(null);
+import { createContext as createContext5, useContext as useContext10 } from "react";
+var NuThemeContext = createContext5(null);
 function useNuTheme() {
   const context = useContext10(NuThemeContext);
   if (!context) {
@@ -10667,7 +10684,7 @@ function useNuTheme() {
 }
 
 // src/theme/NuThemeProvider.tsx
-import { jsx as jsx64, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
 function NuThemeProvider({
   children,
   className,
@@ -10697,7 +10714,7 @@ function NuThemeProvider({
   const resolvedFontSize = fontSize ?? internalFontSize;
   const resolvedTheme = resolveNuTheme(currentTheme);
   const themeName = typeof currentTheme === "string" ? currentTheme : currentTheme.name;
-  const handleThemeChange = useCallback9(
+  const handleThemeChange = useCallback10(
     (nextTheme) => {
       if (theme === void 0) {
         setInternalTheme(nextTheme);
@@ -10706,7 +10723,7 @@ function NuThemeProvider({
     },
     [theme, onThemeChange]
   );
-  const handleDesktopPatternModeChange = useCallback9(
+  const handleDesktopPatternModeChange = useCallback10(
     (nextDesktopPatternMode) => {
       if (desktopPatternMode === void 0) {
         setInternalDesktopPatternMode(nextDesktopPatternMode);
@@ -10715,7 +10732,7 @@ function NuThemeProvider({
     },
     [desktopPatternMode, onDesktopPatternModeChange]
   );
-  const handleFontFamilyChange = useCallback9(
+  const handleFontFamilyChange = useCallback10(
     (nextFontFamily) => {
       if (fontFamily === void 0) {
         setInternalFontFamily(nextFontFamily);
@@ -10724,7 +10741,7 @@ function NuThemeProvider({
     },
     [fontFamily, onFontFamilyChange]
   );
-  const handleFontSizeChange = useCallback9(
+  const handleFontSizeChange = useCallback10(
     (nextFontSize) => {
       if (fontSize === void 0) {
         setInternalFontSize(nextFontSize);
@@ -10733,7 +10750,7 @@ function NuThemeProvider({
     },
     [fontSize, onFontSizeChange]
   );
-  const contextValue = useMemo21(
+  const contextValue = useMemo20(
     () => ({
       desktopPatternMode: resolvedDesktopPatternMode,
       fontFamily: resolvedFontFamily,
@@ -10758,7 +10775,7 @@ function NuThemeProvider({
       handleThemeChange
     ]
   );
-  return /* @__PURE__ */ jsx64(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsx64(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs43(
     "div",
     {
       className: ["nu-theme-root", className].filter(Boolean).join(" "),