@deadragdoll/reactnu 0.1.49 → 0.1.52

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/components/Desktop/Desktop.tsx
 import {
   Fragment as Fragment4,
-  useContext as useContext7,
+  useContext as useContext8,
   useState as useState10
 } from "react";
 
@@ -662,10 +662,10 @@ function toggleMenuCheckedInTree(items, id) {
 }
 
 // src/appHost/NuAppHostProvider.tsx
-import { useMemo as useMemo4, useState as useState6 } from "react";
+import { useMemo as useMemo5, useState as useState6 } from "react";
 
 // src/windowing/internals/MdiWindowPickerDialog.tsx
-import { useMemo as useMemo3, useState as useState5 } from "react";
+import { useMemo as useMemo4, useState as useState5 } from "react";
 
 // src/components/Button/Button.tsx
 import {
@@ -826,11 +826,11 @@ function Button({
 import {
   forwardRef,
   useCallback as useCallback2,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useId,
   useImperativeHandle,
-  useMemo as useMemo2,
-  useRef as useRef3,
+  useMemo as useMemo3,
+  useRef as useRef4,
   useState as useState4
 } from "react";
 
@@ -902,15 +902,245 @@ function ListBoxCategoryView({ category }) {
 // src/components/ListBox/internals/ListBoxItemView.tsx
 import { memo } from "react";
 
-// src/components/ListBox/internals/ListBoxCheckControl.tsx
+// src/components/DragDrop/NuDragDropProvider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useRef as useRef3
+} 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
+  };
+  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 jsx8 } 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;
+  }
+  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);
+    }
+  };
+}
+var fallbackController = createController();
+var NuDragDropContext = createContext(null);
+function NuDragDropProvider({ children }) {
+  const controller = useMemo2(() => createController(), []);
+  return /* @__PURE__ */ jsx8(NuDragDropContext.Provider, { value: controller, children });
+}
+function useNuDragDrop() {
+  return useContext(NuDragDropContext) ?? fallbackController;
+}
+function useNuDropTarget(element, options) {
+  const controller = useNuDragDrop();
+  useEffect3(() => {
+    if (!element || !options) {
+      return void 0;
+    }
+    return controller.registerTarget(element, options);
+  }, [controller, element, options]);
+}
+function useNuDragSource({
+  disabled = false,
+  getItem,
+  onDropAccepted,
+  sourceType
+}) {
+  const controller = useNuDragDrop();
+  const stateRef = useRef3({
+    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 item = getItem();
+        if (!item) {
+          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+          }
+          state.pointerId = -1;
+          state.sourceElement = null;
+          return;
+        }
+        state.dragging = true;
+        controller.beginDrag(item, state.sourceElement, sourceType);
+      }
+      controller.moveDrag(event.clientX, event.clientY);
+    },
+    onPointerUp(event) {
+      stop(event, true);
+    }
+  };
+}
+
+// src/components/ListBox/internals/ListBoxCheckControl.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
 function ListBoxCheckControl({
   isChecked,
   onActivate,
   onToggleCheck,
   uncheckedShape
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       "aria-label": isChecked ? "Uncheck item" : "Check item",
@@ -922,13 +1152,13 @@ function ListBoxCheckControl({
         onToggleCheck();
       },
       type: "button",
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx9(
         "span",
         {
           "aria-hidden": "true",
           className: "nu-listbox__check-box",
           "data-unchecked-shape": uncheckedShape,
-          children: isChecked ? /* @__PURE__ */ jsx8(NuGlyph, { className: "nu-listbox__check-indicator", name: "check-mark" }) : null
+          children: isChecked ? /* @__PURE__ */ jsx9(NuGlyph, { className: "nu-listbox__check-indicator", name: "check-mark" }) : null
         }
       )
     }
@@ -936,9 +1166,10 @@ function ListBoxCheckControl({
 }
 
 // src/components/ListBox/internals/ListBoxItemView.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function ListBoxItemViewInner({
   group,
+  getDragItem,
   isActive,
   isChecked,
   isSelected,
@@ -947,11 +1178,18 @@ function ListBoxItemViewInner({
   onActivate,
   onPopupMenu,
   onDoubleClick,
+  onDragOut,
   onToggleCheck,
   registerItemRef,
   rightCheckBox,
   uncheckedShape
 }) {
+  const dragSource = useNuDragSource({
+    disabled: item.disabled || !getDragItem,
+    getItem: () => getDragItem?.(item, group) ?? false,
+    onDropAccepted: () => onDragOut?.(item, group),
+    sourceType: "listbox-item"
+  });
   function handleActivate() {
     if (!item.disabled) {
       onActivate(item, group, itemId);
@@ -970,7 +1208,7 @@ function ListBoxItemViewInner({
   function handleToggleCheck() {
     onToggleCheck(itemId);
   }
-  const checkControl = item.checkable ? /* @__PURE__ */ jsx9(
+  const checkControl = item.checkable ? /* @__PURE__ */ jsx10(
     ListBoxCheckControl,
     {
       isChecked,
@@ -997,6 +1235,10 @@ 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),
       role: "option",
       children: [
@@ -1004,7 +1246,7 @@ function ListBoxItemViewInner({
           rightCheckBox ? null : checkControl,
           renderLabel(item.name, "nu-listbox__item-label")
         ] }),
-        item.details ? /* @__PURE__ */ jsx9("span", { className: "nu-listbox__item-details", children: item.details }) : null,
+        item.details ? /* @__PURE__ */ jsx10("span", { className: "nu-listbox__item-details", children: item.details }) : null,
         rightCheckBox ? checkControl : null
       ]
     }
@@ -1013,14 +1255,16 @@ function ListBoxItemViewInner({
 var ListBoxItemView = memo(ListBoxItemViewInner);
 
 // src/components/ListBox/internals/ListBoxGroupView.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function ListBoxGroupView({
   group,
   groupIndex,
+  getDragItem,
   isItemChecked,
   listboxId,
   onActivateItem,
   onDoubleClickItem,
+  onItemDragOut,
   onPopupMenuItem,
   onToggleItemCheck,
   registerItemRef,
@@ -1030,7 +1274,7 @@ function ListBoxGroupView({
   uncheckedShape
 }) {
   return /* @__PURE__ */ jsxs7("div", { className: "nu-listbox__group", role: "group", children: [
-    group.category ? /* @__PURE__ */ jsx10(ListBoxCategoryView, { category: group.category }) : null,
+    group.category ? /* @__PURE__ */ jsx11(ListBoxCategoryView, { category: group.category }) : null,
     group.items.map((item, itemIndex) => {
       const itemId = buildListBoxItemId(
         listboxId,
@@ -1042,10 +1286,11 @@ function ListBoxGroupView({
       const isSelected = selectedId ? item.id === selectedId : item.selected;
       const isActive = resolvedActiveId === itemId;
       const isChecked = isItemChecked(item);
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx11(
         ListBoxItemView,
         {
           group,
+          getDragItem,
           isActive,
           isChecked,
           isSelected: Boolean(isSelected),
@@ -1053,6 +1298,7 @@ function ListBoxGroupView({
           itemId,
           onActivate: onActivateItem,
           onDoubleClick: onDoubleClickItem,
+          onDragOut: onItemDragOut,
           onPopupMenu: onPopupMenuItem,
           onToggleCheck: onToggleItemCheck,
           registerItemRef,
@@ -1066,38 +1312,52 @@ function ListBoxGroupView({
 }
 
 // src/components/ListBox/ListBox.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function ListBoxInner({
+  acceptsDrop,
   className,
   data,
   checkedIds,
   emptyText = "No items",
+  getDragItem,
   onPopupMenu,
   onItemCheckChange,
   onItemDoubleClick,
+  onItemDragOut,
   onItemSelect,
+  onDrop,
   rightCheckBox = false,
   selectedId,
   uncheckedShape = "box",
   ...props
 }, ref) {
   const hasItems = data.some((group) => group.items.length > 0);
-  const rootRef = useRef3(null);
+  const rootRef = useRef4(null);
+  const [rootElement, setRootElement] = useState4(null);
   const listboxId = useId();
-  const itemRefs = useRef3({});
-  const flattenedItems = useMemo2(
+  const itemRefs = useRef4({});
+  const flattenedItems = useMemo3(
     () => flattenListBoxData(data, listboxId),
     [data, listboxId]
   );
-  const selectableItems = useMemo2(
+  const selectableItems = useMemo3(
     () => flattenedItems.filter(({ item }) => !item.disabled),
     [flattenedItems]
   );
   const [activeId, setActiveId] = useState4(
     () => getInitialActiveId(selectableItems, selectedId)
   );
+  const dropTargetOptions = useMemo3(
+    () => onDrop ? { accepts: acceptsDrop, onDrop, type: "listbox" } : void 0,
+    [acceptsDrop, onDrop]
+  );
+  useNuDropTarget(rootElement, dropTargetOptions);
+  const setRootRef = useCallback2((node) => {
+    rootRef.current = node;
+    setRootElement(node);
+  }, []);
   const resolvedActiveId = activeId && selectableItems.some((entry) => entry.itemId === activeId) ? activeId : getInitialActiveId(selectableItems, selectedId);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!resolvedActiveId) {
       return;
     }
@@ -1244,7 +1504,7 @@ function ListBoxInner({
         break;
     }
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       ...props,
@@ -1252,18 +1512,20 @@ function ListBoxInner({
       className: ["nu-listbox", className].filter(Boolean).join(" "),
       "data-right-checkbox": rightCheckBox || void 0,
       onKeyDown: handleKeyDown,
-      ref: rootRef,
+      ref: setRootRef,
       role: "listbox",
       tabIndex: 0,
-      children: hasItems ? data.map((group, groupIndex) => /* @__PURE__ */ jsx11(
+      children: hasItems ? data.map((group, groupIndex) => /* @__PURE__ */ jsx12(
         ListBoxGroupView,
         {
           group,
           groupIndex,
           isItemChecked,
+          getDragItem,
           listboxId,
           onActivateItem: activateItem,
           onDoubleClickItem: onItemDoubleClick,
+          onItemDragOut,
           onPopupMenuItem: handleItemPopupMenu,
           onToggleItemCheck: toggleItemCheck,
           registerItemRef,
@@ -1273,14 +1535,14 @@ function ListBoxInner({
           uncheckedShape
         },
         `${group.category?.text ?? "group"}-${groupIndex}`
-      )) : /* @__PURE__ */ jsx11("div", { className: "nu-listbox__empty", children: emptyText })
+      )) : /* @__PURE__ */ jsx12("div", { className: "nu-listbox__empty", children: emptyText })
     }
   );
 }
 var ListBox = forwardRef(ListBoxInner);
 
 // src/components/Stack/Stack.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function resolveFlexAlign(align) {
   if (align === "start") {
     return "flex-start";
@@ -1309,7 +1571,7 @@ function Stack({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       ...props,
@@ -1329,7 +1591,7 @@ function Stack({
 }
 
 // src/windowing/internals/MdiWindowPickerDialog.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function isPickerEligibleWindow(windowEntry) {
   if (windowEntry.mode === "window") {
     return true;
@@ -1363,7 +1625,7 @@ function MdiWindowPickerDialog({
   onClose,
   windows
 }) {
-  const resolvedWindows = useMemo3(
+  const resolvedWindows = useMemo4(
     () => windows.filter(
       (windowEntry) => isPickerEligibleWindow(windowEntry) && (!domain || windowEntry.domain === domain)
     ),
@@ -1383,7 +1645,7 @@ function MdiWindowPickerDialog({
     onClose();
   }
   return /* @__PURE__ */ jsxs8(Stack, { gap: "md", children: [
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       ListBox,
       {
         data: [
@@ -1418,14 +1680,14 @@ function MdiWindowPickerDialog({
       }
     ),
     /* @__PURE__ */ jsxs8(Stack, { direction: "row", gap: "sm", children: [
-      /* @__PURE__ */ jsx13(Button, { defaultFocused: true, onClick: handleActivate, children: "Activate" }),
-      /* @__PURE__ */ jsx13(Button, { onClick: onClose, variant: "secondary", children: "Cancel" })
+      /* @__PURE__ */ jsx14(Button, { defaultFocused: true, onClick: handleActivate, children: "Activate" }),
+      /* @__PURE__ */ jsx14(Button, { onClick: onClose, variant: "secondary", children: "Cancel" })
     ] })
   ] });
 }
 
 // src/windowing/mdiMenu.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var MDI_HOST_ID = "mdi.host";
 function createMdiDivider(id) {
   return {
@@ -1464,7 +1726,7 @@ function openMdiWindowPicker(bridge) {
   bridge.openDialog({
     appModal: true,
     border: "double",
-    content: ({ close }) => /* @__PURE__ */ jsx14(
+    content: ({ close }) => /* @__PURE__ */ jsx15(
       MdiWindowPickerDialog,
       {
         activeWindowId,
@@ -1551,12 +1813,12 @@ function resolveMdiMainMenuItems(items, bridge) {
 }
 
 // src/appHost/appHostContext.ts
-import { createContext, useContext } from "react";
-var AppHostMenuContext = createContext(
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var AppHostMenuContext = createContext2(
   null
 );
 function useAppHostMenu() {
-  const context = useContext(AppHostMenuContext);
+  const context = useContext2(AppHostMenuContext);
   if (!context) {
     throw new Error("useAppHostMenu must be used within a NuAppHostProvider.");
   }
@@ -1581,7 +1843,7 @@ function useAppHostMenu() {
 }
 
 // src/appHost/NuAppHostProvider.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function NuAppHostProvider({
   children,
   renderMenu = true
@@ -1590,11 +1852,11 @@ function NuAppHostProvider({
   const [windowBridge, setWindowBridge] = useState6(
     null
   );
-  const resolvedMainMenu = useMemo4(
+  const resolvedMainMenu = useMemo5(
     () => resolveMdiMainMenuItems(menuState.mainMenu, windowBridge),
     [menuState.mainMenu, windowBridge]
   );
-  const contextValue = useMemo4(
+  const contextValue = useMemo5(
     () => ({
       ...menuState,
       setWindowBridge,
@@ -1603,7 +1865,7 @@ function NuAppHostProvider({
     [menuState, windowBridge]
   );
   return /* @__PURE__ */ jsxs9(AppHostMenuContext.Provider, { value: contextValue, children: [
-    renderMenu && hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx15(MainMenu, { items: resolvedMainMenu }) : null,
+    renderMenu && hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx16(MainMenu, { items: resolvedMainMenu }) : null,
     children
   ] });
 }
@@ -1612,27 +1874,27 @@ function NuAppHostProvider({
 import {
   Fragment as Fragment3,
   useCallback as useCallback3,
-  useContext as useContext6,
-  useEffect as useEffect5,
-  useMemo as useMemo6,
-  useRef as useRef6,
+  useContext as useContext7,
+  useEffect as useEffect6,
+  useMemo as useMemo7,
+  useRef as useRef7,
   useState as useState9
 } from "react";
 
 // src/components/Window/Window.tsx
 import {
   memo as memo2,
-  useContext as useContext4,
+  useContext as useContext5,
   useLayoutEffect,
-  useMemo as useMemo5,
-  useRef as useRef4
+  useMemo as useMemo6,
+  useRef as useRef5
 } from "react";
 
 // src/components/Window/internals/WindowStatusBar.tsx
 import { Children } from "react";
 
 // src/components/Window/StatusBarItem.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function StatusBarItem({
   align = "start",
   children,
@@ -1640,7 +1902,7 @@ function StatusBarItem({
   grow = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "span",
     {
       ...props,
@@ -1656,7 +1918,7 @@ function StatusBarItem({
 }
 
 // src/components/Window/internals/WindowStatusBar.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function WindowStatusBar({
   children,
   onResizeStart,
@@ -1672,15 +1934,15 @@ function WindowStatusBar({
     {
       className: ["nu-window__status-bar", statusBarClassName].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsx17("span", { className: "nu-window__status-bar-items", children: hasCustomItems ? resolvedChildren : resolvedChildren.map((child, index) => /* @__PURE__ */ jsx17(StatusBarItem, { grow: index === 0, children: child }, `status-item-${index}`)) }),
-        resizable ? /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18("span", { className: "nu-window__status-bar-items", children: hasCustomItems ? resolvedChildren : resolvedChildren.map((child, index) => /* @__PURE__ */ jsx18(StatusBarItem, { grow: index === 0, children: child }, `status-item-${index}`)) }),
+        resizable ? /* @__PURE__ */ jsx18(
           "button",
           {
             "aria-label": "Resize window",
             className: "nu-window__resize-handle",
             onPointerDown: onResizeStart,
             type: "button",
-            children: /* @__PURE__ */ jsx17(NuGlyph, { name: "window-resize" })
+            children: /* @__PURE__ */ jsx18(NuGlyph, { name: "window-resize" })
           }
         ) : null
       ]
@@ -1689,18 +1951,18 @@ function WindowStatusBar({
 }
 
 // src/components/Window/WindowTitleButton.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function renderWindowTriangleGlyph(icon) {
   const glyphNameByIcon = {
     maximize: "window-maximize",
     minimize: "window-minimize",
     restore: "window-restore"
   };
-  return /* @__PURE__ */ jsx18(NuGlyph, { className: "nu-window__title-glyph", name: glyphNameByIcon[icon] });
+  return /* @__PURE__ */ jsx19(NuGlyph, { className: "nu-window__title-glyph", name: glyphNameByIcon[icon] });
 }
 function renderTitleButtonIcon(icon) {
   if (icon === "close") {
-    return /* @__PURE__ */ jsx18(NuGlyph, { className: "nu-window__title-glyph", name: "window-close" });
+    return /* @__PURE__ */ jsx19(NuGlyph, { className: "nu-window__title-glyph", name: "window-close" });
   }
   if (icon === "minimize" || icon === "maximize" || icon === "restore") {
     return renderWindowTriangleGlyph(
@@ -1719,7 +1981,7 @@ function WindowTitleButton({
   variant = icon === "close" ? "close" : "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "button",
     {
       ...props,
@@ -1741,7 +2003,7 @@ function WindowTitleButton({
 }
 
 // src/components/Window/internals/WindowTitleBar.tsx
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 function WindowTitleBar({
   draggable,
   onDragStart,
@@ -1759,8 +2021,8 @@ function WindowTitleBar({
         "--nu-window-title-controls-width": controlsWidth
       },
       children: [
-        /* @__PURE__ */ jsx19("span", { className: "nu-window__title", children: renderMnemonicText(title) }),
-        titleButtons.length > 0 ? /* @__PURE__ */ jsx19("span", { className: "nu-window__title-controls", children: titleButtons.map((button, index) => /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20("span", { className: "nu-window__title", children: renderMnemonicText(title) }),
+        titleButtons.length > 0 ? /* @__PURE__ */ jsx20("span", { className: "nu-window__title-controls", children: titleButtons.map((button, index) => /* @__PURE__ */ jsx20(
           WindowTitleButton,
           {
             ariaLabel: button.ariaLabel,
@@ -1817,10 +2079,10 @@ function useWindowTitleButtons({
 }
 
 // src/windowing/windowContext.ts
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var NuWindowContext = createContext2(null);
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var NuWindowContext = createContext3(null);
 function useNuWindowManager() {
-  const context = useContext2(NuWindowContext);
+  const context = useContext3(NuWindowContext);
   if (!context) {
     throw new Error(
       "useNuWindowManager must be used within a NuWindowProvider."
@@ -1830,10 +2092,10 @@ function useNuWindowManager() {
 }
 
 // src/components/Window/windowMenuContext.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var WindowMenuContext = createContext3(null);
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var WindowMenuContext = createContext4(null);
 function useWindowMenu() {
-  const context = useContext3(WindowMenuContext);
+  const context = useContext4(WindowMenuContext);
   if (!context) {
     throw new Error("useWindowMenu must be used within a Window menu scope.");
   }
@@ -1841,7 +2103,7 @@ function useWindowMenu() {
 }
 
 // src/components/Window/Window.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 function getWindowLayerBounds(node) {
   const parentNode = node.parentElement;
   if (!parentNode) {
@@ -1889,18 +2151,18 @@ function WindowInner({
   title,
   ...props
 }) {
-  const windowRef = useRef4(null);
-  const dragFrameRef = useRef4(null);
-  const dragPositionRef = useRef4(null);
-  const resizeFrameRef = useRef4(null);
-  const resizeSizeRef = useRef4(null);
+  const windowRef = useRef5(null);
+  const dragFrameRef = useRef5(null);
+  const dragPositionRef = useRef5(null);
+  const resizeFrameRef = useRef5(null);
+  const resizeSizeRef = useRef5(null);
   const menuState = useMainMenuState();
-  const windowManager = useContext4(NuWindowContext);
+  const windowManager = useContext5(NuWindowContext);
   const isDraggable = draggable ?? mode === "window";
   const isMaximizable = maximizable ?? mode === "window";
   const isMinimizable = minimizable ?? mode === "window";
   const isResizable = resizable ?? mode === "window";
-  const mdiBridge = useMemo5(
+  const mdiBridge = useMemo6(
     () => ({
       activateWindow: windowManager?.activateWindow ?? (() => void 0),
       openDialog: windowManager?.openDialog ?? (() => ""),
@@ -1908,7 +2170,7 @@ function WindowInner({
     }),
     [windowManager?.activateWindow, windowManager?.openDialog, windowManager?.windows]
   );
-  const resolvedMainMenu = useMemo5(
+  const resolvedMainMenu = useMemo6(
     () => resolveMdiMainMenuItems(menuState.mainMenu, mdiBridge),
     [menuState.mainMenu, mdiBridge]
   );
@@ -2136,14 +2398,14 @@ function WindowInner({
       ref: windowRef,
       style,
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "span",
           {
             "aria-hidden": true,
             className: "nu-window__shadow nu-window__shadow--right"
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "span",
           {
             "aria-hidden": true,
@@ -2151,7 +2413,7 @@ function WindowInner({
           }
         ),
         /* @__PURE__ */ jsxs12(WindowMenuContext.Provider, { value: menuState, children: [
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             WindowTitleBar,
             {
               draggable: isDraggable,
@@ -2160,8 +2422,8 @@ function WindowInner({
               titleButtons: resolvedTitleButtons
             }
           ),
-          hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx20(MainMenu, { items: resolvedMainMenu }) : null,
-          /* @__PURE__ */ jsx20(
+          hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx21(MainMenu, { items: resolvedMainMenu }) : null,
+          /* @__PURE__ */ jsx21(
             "div",
             {
               className: [
@@ -2172,7 +2434,7 @@ function WindowInner({
               children
             }
           ),
-          mode === "window" && (statusBar || isResizable) ? /* @__PURE__ */ jsx20(
+          mode === "window" && (statusBar || isResizable) ? /* @__PURE__ */ jsx21(
             WindowStatusBar,
             {
               onResizeStart: handleResizePointerDown,
@@ -2189,9 +2451,9 @@ function WindowInner({
 var Window = memo2(WindowInner);
 
 // src/windowing/AppBarHost.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function AppBarHost({ children, inline = false }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "aside",
     {
       className: [
@@ -2207,7 +2469,7 @@ function AppBarHost({ children, inline = false }) {
 }
 
 // src/windowing/WindowBar.tsx
-import { useContext as useContext5 } from "react";
+import { useContext as useContext6 } from "react";
 
 // src/windowing/AppBarItem.tsx
 import {
@@ -2281,7 +2543,7 @@ function AppBarItem(props) {
 }
 
 // src/windowing/WindowBar.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function buildWindowBarGroups(items) {
   const groups = [];
   const groupsByDomain = /* @__PURE__ */ new Map();
@@ -2315,7 +2577,7 @@ function buildWindowBarGroups(items) {
   return groups;
 }
 function WindowBar({ items, onActivateWindow }) {
-  const windowManager = useContext5(NuWindowContext);
+  const windowManager = useContext6(NuWindowContext);
   const groups = buildWindowBarGroups(items);
   function activateGroup(group) {
     if (group.items.length <= 1) {
@@ -2333,7 +2595,7 @@ function WindowBar({ items, onActivateWindow }) {
     const dialogDefinition = {
       appModal: true,
       border: "double",
-      content: ({ close }) => /* @__PURE__ */ jsx22(
+      content: ({ close }) => /* @__PURE__ */ jsx23(
         MdiWindowPickerDialog,
         {
           activeWindowId: activeGroupWindowId,
@@ -2354,7 +2616,7 @@ function WindowBar({ items, onActivateWindow }) {
     };
     windowManager.openDialog(dialogDefinition);
   }
-  return /* @__PURE__ */ jsx22("div", { className: "nu-window-bar", role: "group", "aria-label": "Open windows", children: groups.map((group) => /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23("div", { className: "nu-window-bar", role: "group", "aria-label": "Open windows", children: groups.map((group) => /* @__PURE__ */ jsx23(
     AppBarItem,
     {
       active: group.active,
@@ -2372,12 +2634,12 @@ import { useState as useState8 } from "react";
 
 // src/components/TextField/TextField.tsx
 import {
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useId as useId2,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState7
 } from "react";
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 function TextField({
   className,
   debounceMs = 0,
@@ -2398,12 +2660,12 @@ function TextField({
   const fieldId = id ?? generatedId;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const isControlled = value !== void 0;
-  const hasMountedRef = useRef5(false);
+  const hasMountedRef = useRef6(false);
   const [uncontrolledValue, setUncontrolledValue] = useState7(
     () => defaultValue == null ? "" : String(defaultValue)
   );
   const resolvedValue = isControlled ? value == null ? "" : String(value) : uncontrolledValue;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!onDebouncedChange) {
       return;
     }
@@ -2435,7 +2697,7 @@ function TextField({
       htmlFor: fieldId,
       style: slotStyles?.root,
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "span",
           {
             className: cx("nu-text-field__label", slotClassNames?.label),
@@ -2449,7 +2711,7 @@ function TextField({
             className: cx("nu-text-field__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -2458,7 +2720,7 @@ function TextField({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 "span",
                 {
                   className: cx(
@@ -2466,7 +2728,7 @@ function TextField({
                     slotClassNames?.inputShell
                   ),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ jsx23(
+                  children: /* @__PURE__ */ jsx24(
                     "input",
                     {
                       ...props,
@@ -2485,7 +2747,7 @@ function TextField({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -2497,7 +2759,7 @@ function TextField({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx23(
+        hint ? /* @__PURE__ */ jsx24(
           "span",
           {
             className: cx("nu-text-field__hint", slotClassNames?.hint),
@@ -2512,7 +2774,7 @@ function TextField({
 }
 
 // src/components/View/NuView.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function NuView({
   children,
   className,
@@ -2521,7 +2783,7 @@ function NuView({
   scroll = "auto",
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       ...props,
@@ -2535,7 +2797,7 @@ function NuView({
 }
 
 // src/windowing/dialogHelpers.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 function getPresetButtons(preset) {
   switch (preset) {
     case "ok-cancel":
@@ -2638,8 +2900,8 @@ function MessageBoxDialogContent({
   const bodyStyle = kind === "error" ? {
     background: "var(--nu-color-button-danger)"
   } : void 0;
-  return /* @__PURE__ */ jsx25(NuView, { padding: "cell", style: bodyStyle, children: /* @__PURE__ */ jsxs14(Stack, { gap: "md", children: [
-    /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(NuView, { padding: "cell", style: bodyStyle, children: /* @__PURE__ */ jsxs14(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsx26(
       "div",
       {
         style: tone ? {
@@ -2649,7 +2911,7 @@ function MessageBoxDialogContent({
       }
     ),
     /* @__PURE__ */ jsxs14(Stack, { direction: "row", gap: "sm", justify: "center", children: [
-      ok ? /* @__PURE__ */ jsx25(
+      ok ? /* @__PURE__ */ jsx26(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2658,7 +2920,7 @@ function MessageBoxDialogContent({
           children: okLabel
         }
       ) : null,
-      yes ? /* @__PURE__ */ jsx25(
+      yes ? /* @__PURE__ */ jsx26(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2667,7 +2929,7 @@ function MessageBoxDialogContent({
           children: yesLabel
         }
       ) : null,
-      no ? /* @__PURE__ */ jsx25(
+      no ? /* @__PURE__ */ jsx26(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2676,7 +2938,7 @@ function MessageBoxDialogContent({
           children: noLabel
         }
       ) : null,
-      cancel ? /* @__PURE__ */ jsx25(
+      cancel ? /* @__PURE__ */ jsx26(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2698,8 +2960,8 @@ function InputBoxDialogContent({
   placeholder
 }) {
   const [value, setValue] = useState8(defaultValue ?? "");
-  return /* @__PURE__ */ jsx25(NuView, { padding: "cell", children: /* @__PURE__ */ jsxs14(Stack, { gap: "md", children: [
-    /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(NuView, { padding: "cell", children: /* @__PURE__ */ jsxs14(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsx26(
       TextField,
       {
         autoFocus: true,
@@ -2711,7 +2973,7 @@ function InputBoxDialogContent({
       }
     ),
     /* @__PURE__ */ jsxs14(Stack, { direction: "row", gap: "sm", justify: "center", children: [
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2720,7 +2982,7 @@ function InputBoxDialogContent({
           children: okLabel
         }
       ),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2734,7 +2996,7 @@ function InputBoxDialogContent({
 }
 
 // src/windowing/NuWindowProvider.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 function getDefaultWindowStyle(mode, index) {
   const offset = index * 18;
   return {
@@ -2878,12 +3140,12 @@ function NuWindowProvider({
   onAppModalChange,
   renderAppBar = false
 }) {
-  const creationOrderRef = useRef6(0);
-  const idRef = useRef6(0);
-  const windowBoundsByIdRef = useRef6({});
+  const creationOrderRef = useRef7(0);
+  const idRef = useRef7(0);
+  const windowBoundsByIdRef = useRef7({});
   const [windows, setWindows] = useState9([]);
   const [windowBoundsById, setWindowBoundsById] = useState9({});
-  const appHostMenuContext = useContext6(AppHostMenuContext);
+  const appHostMenuContext = useContext7(AppHostMenuContext);
   const nextId = useCallback3(() => {
     idRef.current += 1;
     return `nu-window-${idRef.current}`;
@@ -3128,7 +3390,7 @@ function NuWindowProvider({
       openDialog({
         appModal: options.appModal ?? true,
         closeable: true,
-        content: ({ close }) => /* @__PURE__ */ jsx26(
+        content: ({ close }) => /* @__PURE__ */ jsx27(
           MessageBoxDialogContent,
           {
             cancel: buttons.cancel,
@@ -3171,7 +3433,7 @@ function NuWindowProvider({
       openDialog({
         appModal: options.appModal ?? true,
         closeable: true,
-        content: ({ close }) => /* @__PURE__ */ jsx26(
+        content: ({ close }) => /* @__PURE__ */ jsx27(
           InputBoxDialogContent,
           {
             cancelLabel: options.cancelLabel ?? "&Cancel",
@@ -3210,7 +3472,7 @@ function NuWindowProvider({
   const topmostAppModalId = topmostAppModalIndex >= 0 ? visibleWindows[topmostAppModalIndex]?.id : void 0;
   const activeWindowId = topmostAppModalIndex >= 0 ? visibleWindows[topmostAppModalIndex]?.id : visibleWindows[visibleWindows.length - 1]?.id;
   const hasAppModal = topmostAppModalIndex >= 0;
-  const windowsInfo = useMemo6(
+  const windowsInfo = useMemo7(
     () => [...windows].sort(
       (leftWindow, rightWindow) => leftWindow.creationOrder - rightWindow.creationOrder
     ).map((windowEntry) => ({
@@ -3236,7 +3498,7 @@ function NuWindowProvider({
     })),
     [activeWindowId, windows]
   );
-  const mdiBridge = useMemo6(
+  const mdiBridge = useMemo7(
     () => ({
       activateWindow,
       openDialog,
@@ -3244,7 +3506,7 @@ function NuWindowProvider({
     }),
     [activateWindow, openDialog, windowsInfo]
   );
-  const contextValue = useMemo6(
+  const contextValue = useMemo7(
     () => ({
       activateWindow,
       bringToFront,
@@ -3274,13 +3536,13 @@ function NuWindowProvider({
       windowsInfo
     ]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (!appHostMenuContext) {
       return;
     }
     appHostMenuContext.setWindowBridge(mdiBridge);
   }, [appHostMenuContext, mdiBridge]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!appHostMenuContext) {
       return;
     }
@@ -3288,12 +3550,12 @@ function NuWindowProvider({
       appHostMenuContext.setWindowBridge(null);
     };
   }, [appHostMenuContext]);
-  useEffect5(() => {
+  useEffect6(() => {
     onAppModalChange?.(hasAppModal);
   }, [hasAppModal, onAppModalChange]);
-  return /* @__PURE__ */ jsx26(NuWindowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs15("div", { className: ["nu-window-host", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsx27(NuWindowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs15("div", { className: ["nu-window-host", className].filter(Boolean).join(" "), children: [
     children,
-    /* @__PURE__ */ jsx26("div", { className: "nu-window-layer", children: renderWindows.map((windowEntry) => {
+    /* @__PURE__ */ jsx27("div", { className: "nu-window-layer", children: renderWindows.map((windowEntry) => {
       const isActiveWindow = windowEntry.id === activeWindowId;
       const stackIndex = stackIndexById.get(windowEntry.id);
       const isTopmostAppModal = windowEntry.id === topmostAppModalId;
@@ -3323,20 +3585,20 @@ function NuWindowProvider({
       };
       const content = typeof windowEntry.content === "function" ? windowEntry.content(controls) : windowEntry.content;
       return /* @__PURE__ */ jsxs15(Fragment3, { children: [
-        isTopmostAppModal ? /* @__PURE__ */ jsx26(
+        isTopmostAppModal ? /* @__PURE__ */ jsx27(
           "div",
           {
             className: "nu-window-layer__modal-backdrop",
             style: { zIndex: visibleWindows.length + 1 }
           }
-        ) : ownerBackdropStyle ? /* @__PURE__ */ jsx26(
+        ) : ownerBackdropStyle ? /* @__PURE__ */ jsx27(
           "div",
           {
             className: "nu-window-layer__modal-backdrop",
             style: ownerBackdropStyle
           }
         ) : null,
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           Window,
           {
             active: isActiveWindow,
@@ -3369,7 +3631,7 @@ function NuWindowProvider({
         )
       ] }, windowEntry.id);
     }) }),
-    renderAppBar ? /* @__PURE__ */ jsx26(AppBarHost, { children: /* @__PURE__ */ jsx26(
+    renderAppBar ? /* @__PURE__ */ jsx27(AppBarHost, { children: /* @__PURE__ */ jsx27(
       WindowBar,
       {
         items: windowsInfo.map((windowEntry) => ({
@@ -3386,11 +3648,11 @@ function NuWindowProvider({
 }
 
 // src/components/Desktop/Desktop.tsx
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 function DesktopWindowRegion({ appBar, children }) {
   return /* @__PURE__ */ jsxs16(Fragment4, { children: [
-    /* @__PURE__ */ jsx27("div", { className: "nu-desktop__workspace", children }),
-    appBar ? /* @__PURE__ */ jsx27("div", { className: "nu-desktop__app-bar", children: appBar }) : null
+    /* @__PURE__ */ jsx28("div", { className: "nu-desktop__workspace", children }),
+    appBar ? /* @__PURE__ */ jsx28("div", { className: "nu-desktop__app-bar", children: appBar }) : null
   ] });
 }
 function NuDesktop({
@@ -3401,11 +3663,11 @@ function NuDesktop({
   ...props
 }) {
   const [hasAppModal, setHasAppModal] = useState10(false);
-  const appHostContext = useContext7(AppHostMenuContext);
+  const appHostContext = useContext8(AppHostMenuContext);
   if (appHostContext) {
     throw new Error("NuDesktop should not be nested inside another app host.");
   }
-  return /* @__PURE__ */ jsx27(NuAppHostProvider, { renderMenu: false, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(NuAppHostProvider, { renderMenu: false, children: /* @__PURE__ */ jsx28(
     NuDesktopShell,
     {
       appBar: appBar ?? appBarContent,
@@ -3425,7 +3687,7 @@ function NuDesktopShell({
   onAppModalChange,
   props
 }) {
-  const appHostContext = useContext7(AppHostMenuContext);
+  const appHostContext = useContext8(AppHostMenuContext);
   if (!appHostContext) {
     throw new Error("NuDesktop must be used within a NuAppHostProvider.");
   }
@@ -3440,14 +3702,14 @@ function NuDesktopShell({
       className: ["nu-desktop", className].filter(Boolean).join(" "),
       "data-modal-active": hasAppModal || void 0,
       children: [
-        hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx27("div", { className: "nu-desktop__menu", children: /* @__PURE__ */ jsx27(MainMenu, { items: resolvedMainMenu }) }) : null,
-        /* @__PURE__ */ jsx27(
+        hasVisibleMainMenuItems(resolvedMainMenu) ? /* @__PURE__ */ jsx28("div", { className: "nu-desktop__menu", children: /* @__PURE__ */ jsx28(MainMenu, { items: resolvedMainMenu }) }) : null,
+        /* @__PURE__ */ jsx28(
           NuWindowProvider,
           {
             className: "nu-desktop__window-region",
             onAppModalChange,
             renderAppBar: false,
-            children: /* @__PURE__ */ jsx27(DesktopWindowRegion, { appBar, children })
+            children: /* @__PURE__ */ jsx28(DesktopWindowRegion, { appBar, children })
           }
         )
       ]
@@ -3456,7 +3718,7 @@ function NuDesktopShell({
 }
 
 // src/components/Dashboard/Dashboard.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function resolveDashboardGap(gap) {
   if (typeof gap === "number") {
     return `${gap}px`;
@@ -3477,7 +3739,7 @@ function Dashboard({
   const resolvedGap = resolveDashboardGap(gap);
   if (layout === "lanes") {
     const lanes = Array.from({ length: laneCount }, (_, index) => index + 1);
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx29(
       "div",
       {
         ...props,
@@ -3489,7 +3751,7 @@ function Dashboard({
           "--nu-dashboard-gap": resolvedGap,
           "--nu-dashboard-lane-count": laneCount
         },
-        children: lanes.map((lane) => /* @__PURE__ */ jsx28("div", { className: "nu-dashboard__lane", children: items.filter((item) => (item.lane ?? 1) === lane).map((item) => /* @__PURE__ */ jsx28(
+        children: lanes.map((lane) => /* @__PURE__ */ jsx29("div", { className: "nu-dashboard__lane", children: items.filter((item) => (item.lane ?? 1) === lane).map((item) => /* @__PURE__ */ jsx29(
           "div",
           {
             className: "nu-dashboard__cell",
@@ -3501,14 +3763,14 @@ function Dashboard({
               minWidth: item.minWidth,
               width: item.width
             },
-            children: /* @__PURE__ */ jsx28("div", { className: "nu-dashboard__content", children: item.content })
+            children: /* @__PURE__ */ jsx29("div", { className: "nu-dashboard__content", children: item.content })
           },
           item.id
         )) }, lane))
       }
     );
   }
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       ...props,
@@ -3519,7 +3781,7 @@ function Dashboard({
         "--nu-dashboard-column-count": columnCount,
         "--nu-dashboard-gap": resolvedGap
       },
-      children: items.map((item) => /* @__PURE__ */ jsx28(
+      children: items.map((item) => /* @__PURE__ */ jsx29(
         "div",
         {
           className: "nu-dashboard__cell",
@@ -3533,7 +3795,7 @@ function Dashboard({
             minWidth: item.minWidth,
             width: item.width
           },
-          children: /* @__PURE__ */ jsx28("div", { className: "nu-dashboard__content", children: item.content })
+          children: /* @__PURE__ */ jsx29("div", { className: "nu-dashboard__content", children: item.content })
         },
         item.id
       ))
@@ -3543,7 +3805,7 @@ function Dashboard({
 
 // src/components/CheckBox/CheckBox.tsx
 import { useId as useId3, useState as useState11 } from "react";
-import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 function CheckBox({
   checked,
   className,
@@ -3582,7 +3844,7 @@ function CheckBox({
             className: cx("nu-check-box__main", slotClassNames?.main),
             style: slotStyles?.main,
             children: [
-              /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx30(
                 "input",
                 {
                   ...props,
@@ -3596,19 +3858,19 @@ function CheckBox({
                   type: "checkbox"
                 }
               ),
-              /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx30(
                 "span",
                 {
                   "aria-hidden": "true",
                   className: cx("nu-check-box__control", slotClassNames?.control),
                   style: slotStyles?.control,
-                  children: /* @__PURE__ */ jsx29(
+                  children: /* @__PURE__ */ jsx30(
                     "span",
                     {
                       className: cx("nu-check-box__box", slotClassNames?.box),
                       "data-unchecked-shape": uncheckedShape,
                       style: slotStyles?.box,
-                      children: resolvedChecked ? /* @__PURE__ */ jsx29(
+                      children: resolvedChecked ? /* @__PURE__ */ jsx30(
                         NuGlyph,
                         {
                           className: cx("nu-check-box__mark", slotClassNames?.mark),
@@ -3620,7 +3882,7 @@ function CheckBox({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx30(
                 "span",
                 {
                   className: cx("nu-check-box__label", slotClassNames?.label),
@@ -3631,7 +3893,7 @@ function CheckBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx29(
+        hint ? /* @__PURE__ */ jsx30(
           "span",
           {
             className: cx("nu-check-box__hint", slotClassNames?.hint),
@@ -3647,29 +3909,29 @@ function CheckBox({
 
 // src/components/Dropdown/Dropdown.tsx
 import {
-  useEffect as useEffect6,
+  useEffect as useEffect7,
   useId as useId4,
-  useMemo as useMemo7,
-  useRef as useRef7,
+  useMemo as useMemo8,
+  useRef as useRef8,
   useState as useState12
 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/_shared/ControlOpener.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function ControlOpener(props) {
   const { children, className, glyphClassName, glyphStyle, style } = props;
   if (props.as === "button") {
     const { as: _as2, type = "button", ...buttonProps } = props;
     void _as2;
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       "button",
       {
         ...buttonProps,
         className: cx("nu-control-opener", className),
         style,
         type,
-        children: children ?? /* @__PURE__ */ jsx30(
+        children: children ?? /* @__PURE__ */ jsx31(
           NuGlyph,
           {
             className: cx("nu-control-opener__glyph", glyphClassName),
@@ -3682,14 +3944,14 @@ function ControlOpener(props) {
   }
   const { ariaHidden = false, as: _as, ...spanProps } = props;
   void _as;
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     "span",
     {
       ...spanProps,
       "aria-hidden": ariaHidden,
       className: cx("nu-control-opener", className),
       style,
-      children: children ?? /* @__PURE__ */ jsx30(
+      children: children ?? /* @__PURE__ */ jsx31(
         NuGlyph,
         {
           className: cx("nu-control-opener__glyph", glyphClassName),
@@ -3805,7 +4067,7 @@ function usePopupPosition({
 }
 
 // src/components/Dropdown/Dropdown.tsx
-import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 function flattenDropdownOptions(data) {
   const options = [];
   data.forEach((group) => {
@@ -3854,13 +4116,13 @@ function Dropdown({
   style,
   ...props
 }) {
-  const rootRef = useRef7(null);
-  const triggerRef = useRef7(null);
-  const fieldRef = useRef7(null);
-  const popupRef = useRef7(null);
-  const popupListRef = useRef7(null);
+  const rootRef = useRef8(null);
+  const triggerRef = useRef8(null);
+  const fieldRef = useRef8(null);
+  const popupRef = useRef8(null);
+  const popupListRef = useRef8(null);
   const [open, setOpen] = useState12(false);
-  const options = useMemo7(() => flattenDropdownOptions(data), [data]);
+  const options = useMemo8(() => flattenDropdownOptions(data), [data]);
   const generatedId = useId4();
   const fieldId = `${generatedId}-dropdown`;
   const labelId = `${fieldId}-label`;
@@ -3868,16 +4130,16 @@ function Dropdown({
   const isControlled = value !== void 0;
   const [uncontrolledValue, setUncontrolledValue] = useState12(() => getInitialValue(options, defaultValue));
   const resolvedValue = isControlled ? value : uncontrolledValue;
-  const selectedOption = useMemo7(
+  const selectedOption = useMemo8(
     () => findSelectedOption(options, resolvedValue),
     [options, resolvedValue]
   );
-  const selectableOptions = useMemo7(
+  const selectableOptions = useMemo8(
     () => options.filter((option) => !option.item.disabled),
     [options]
   );
   const displayText = selectedOption?.item.name.text ?? placeholder;
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) {
       return;
     }
@@ -3905,7 +4167,7 @@ function Dropdown({
     open,
     popupRef
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) {
       return;
     }
@@ -3979,7 +4241,7 @@ function Dropdown({
       ref: rootRef,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "span",
           {
             className: cx("nu-dropdown__label", slotClassNames?.label),
@@ -3988,7 +4250,7 @@ function Dropdown({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "button",
           {
             "aria-describedby": hintId,
@@ -4019,7 +4281,7 @@ function Dropdown({
                       ref: fieldRef,
                       style: slotStyles?.field,
                       children: [
-                        /* @__PURE__ */ jsx31(
+                        /* @__PURE__ */ jsx32(
                           "span",
                           {
                             "aria-hidden": "true",
@@ -4028,7 +4290,7 @@ function Dropdown({
                             children: "["
                           }
                         ),
-                        /* @__PURE__ */ jsx31(
+                        /* @__PURE__ */ jsx32(
                           "span",
                           {
                             className: cx(
@@ -4036,7 +4298,7 @@ function Dropdown({
                               slotClassNames?.valueShell
                             ),
                             style: slotStyles?.valueShell,
-                            children: /* @__PURE__ */ jsx31(
+                            children: /* @__PURE__ */ jsx32(
                               "span",
                               {
                                 className: cx("nu-dropdown__value", slotClassNames?.value),
@@ -4046,7 +4308,7 @@ function Dropdown({
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsx31(
+                        /* @__PURE__ */ jsx32(
                           "span",
                           {
                             "aria-hidden": "true",
@@ -4058,7 +4320,7 @@ function Dropdown({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx31(
+                  /* @__PURE__ */ jsx32(
                     ControlOpener,
                     {
                       ariaHidden: true,
@@ -4069,7 +4331,7 @@ function Dropdown({
                         slotClassNames?.arrowShell
                       ),
                       style: slotStyles?.arrowShell,
-                      children: /* @__PURE__ */ jsx31(
+                      children: /* @__PURE__ */ jsx32(
                         NuGlyph,
                         {
                           className: cx(
@@ -4088,7 +4350,7 @@ function Dropdown({
             )
           }
         ),
-        hint ? /* @__PURE__ */ jsx31(
+        hint ? /* @__PURE__ */ jsx32(
           "span",
           {
             className: cx("nu-dropdown__hint", slotClassNames?.hint),
@@ -4098,7 +4360,7 @@ function Dropdown({
           }
         ) : null,
         open && typeof document !== "undefined" ? createPortal(
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx32(
             "div",
             {
               className: cx("nu-dropdown__popup", slotClassNames?.popup),
@@ -4107,7 +4369,7 @@ function Dropdown({
                 { left: 0, top: 0, visibility: "hidden", width: 0 },
                 slotStyles?.popup
               ),
-              children: /* @__PURE__ */ jsx31(
+              children: /* @__PURE__ */ jsx32(
                 "div",
                 {
                   className: cx(
@@ -4116,7 +4378,7 @@ function Dropdown({
                   ),
                   ref: popupListRef,
                   style: slotStyles?.popupShell,
-                  children: /* @__PURE__ */ jsx31(
+                  children: /* @__PURE__ */ jsx32(
                     ListBox,
                     {
                       className: cx(
@@ -4149,7 +4411,7 @@ function Dropdown({
 }
 
 // src/components/Frame/Frame.tsx
-import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 function Frame({
   children,
   className,
@@ -4193,7 +4455,7 @@ function Frame({
             className: cx("nu-frame__title", slotClassNames?.title),
             style: mergeSlotStyle(titleStyle, slotStyles?.title),
             children: [
-              titleStart ? /* @__PURE__ */ jsx32(
+              titleStart ? /* @__PURE__ */ jsx33(
                 "span",
                 {
                   className: cx(
@@ -4204,7 +4466,7 @@ function Frame({
                   children: titleStart
                 }
               ) : null,
-              resolvedTitleContent ? /* @__PURE__ */ jsx32(
+              resolvedTitleContent ? /* @__PURE__ */ jsx33(
                 "span",
                 {
                   className: cx(
@@ -4215,7 +4477,7 @@ function Frame({
                   children: resolvedTitleContent
                 }
               ) : null,
-              titleEnd ? /* @__PURE__ */ jsx32(
+              titleEnd ? /* @__PURE__ */ jsx33(
                 "span",
                 {
                   className: cx("nu-frame__title-end", slotClassNames?.titleEnd),
@@ -4226,7 +4488,7 @@ function Frame({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           "div",
           {
             className: cx("nu-frame__body", slotClassNames?.body),
@@ -4240,7 +4502,7 @@ function Frame({
 }
 
 // src/components/Info/Info.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function Info({
   accentColor,
   children,
@@ -4249,7 +4511,7 @@ function Info({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       ...props,
@@ -4273,7 +4535,7 @@ function InfoAccent({
   upper = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "span",
     {
       ...props,
@@ -4290,48 +4552,22 @@ function InfoAccent({
 
 // src/components/IconGrid/NuIconGrid.tsx
 import {
-  useEffect as useEffect8,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo8,
-  useRef as useRef9,
+  useMemo as useMemo9,
+  useRef as useRef10,
   useState as useState15
 } from "react";
 
 // src/components/PopupMenu/PopupMenu.tsx
 import {
   useCallback as useCallback4,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useLayoutEffect as useLayoutEffect3,
-  useRef as useRef8,
+  useRef as useRef9,
   useState as useState13
 } 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 jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function hasVisibleChildren2(item) {
   return Boolean(item.items?.some((child) => !child.hidden));
 }
@@ -4372,7 +4608,7 @@ function PopupMenu({
   uncheckedShape = "box",
   ...props
 }) {
-  const rootRef = useRef8(null);
+  const rootRef = useRef9(null);
   const [activePath, setActivePath] = useState13([]);
   const [uncontrolledOpen, setUncontrolledOpen] = useState13(defaultOpen);
   const isControlled = open !== void 0;
@@ -4390,7 +4626,7 @@ function PopupMenu({
     },
     [isControlled, onOpenChange]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (!resolvedOpen) {
       return;
     }
@@ -4465,7 +4701,7 @@ function PopupMenu({
     return null;
   }
   return createPortal2(
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35(
       "div",
       {
         ...props,
@@ -4481,7 +4717,7 @@ function PopupMenu({
           top: 0,
           visibility: "hidden"
         },
-        children: /* @__PURE__ */ jsx34("div", { className: "nu-popup-menu__shell", children: /* @__PURE__ */ jsx34(
+        children: /* @__PURE__ */ jsx35("div", { className: "nu-popup-menu__shell", children: /* @__PURE__ */ jsx35(
           MainMenuList,
           {
             activePath,
@@ -4543,10 +4779,10 @@ function usePopupMenu() {
 }
 
 // src/components/IconGrid/iconContext.ts
-import { createContext as createContext4, useContext as useContext8 } from "react";
-var NuIconContext = createContext4(null);
+import { createContext as createContext5, useContext as useContext9 } from "react";
+var NuIconContext = createContext5(null);
 function useNuIconContext() {
-  const context = useContext8(NuIconContext);
+  const context = useContext9(NuIconContext);
   if (!context) {
     throw new Error("useNuIconManager must be used within a NuIconProvider.");
   }
@@ -4560,8 +4796,8 @@ function useNuIconGridContext() {
 }
 
 // src/components/IconGrid/NuIconGrid.tsx
-import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
-var DRAG_THRESHOLD = 3;
+import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+var DRAG_THRESHOLD2 = 3;
 var gridRegistrations = /* @__PURE__ */ new Map();
 function clamp2(value, minimum, maximum) {
   return Math.min(Math.max(value, minimum), maximum);
@@ -4609,60 +4845,24 @@ function getTransferredPosition(targetGrid, iconElement, clientX, clientY) {
     )
   };
 }
-function createDragPreview(iconElement) {
-  const rect = iconElement.getBoundingClientRect();
-  const preview = iconElement.cloneNode(true);
-  preview.removeAttribute("id");
-  preview.setAttribute("aria-hidden", "true");
-  preview.setAttribute("disabled", "");
-  preview.setAttribute("tabindex", "-1");
-  Object.assign(preview.style, {
-    height: `${rect.height}px`,
-    left: `${rect.left}px`,
-    margin: "0",
-    opacity: window.getComputedStyle(iconElement).getPropertyValue("--nu-icon-grid-icon-drag-preview-opacity").trim() || "0.85",
-    pointerEvents: "none",
-    position: "fixed",
-    top: `${rect.top}px`,
-    width: `${rect.width}px`,
-    zIndex: "2147483647"
-  });
-  const themeStyle = getThemePortalStyle(iconElement);
-  Object.entries(themeStyle ?? {}).forEach(([property, value]) => {
-    if (value !== void 0) {
-      preview.style.setProperty(property, String(value));
-    }
-  });
-  document.body.append(preview);
-  return preview;
-}
-function moveDragPreview(preview, iconElement, clientX, clientY) {
-  const rect = iconElement.getBoundingClientRect();
-  preview.style.left = `${Math.round(clientX - rect.width / 2)}px`;
-  preview.style.top = `${Math.round(clientY - rect.height / 2)}px`;
-}
 function NuIconGridItem({
   gridElement,
   icon,
+  onDragOut,
   onIconMoveOut
 }) {
   const manager = useNuIconGridContext();
+  const dragDrop = useNuDragDrop();
   const contextMenu = usePopupMenu();
-  const dragStartRef = useRef9(void 0);
-  const isDraggingRef = useRef9(false);
-  const dragPreviewRef = useRef9(null);
+  const dragStartRef = useRef10(void 0);
+  const isDraggingRef = useRef10(false);
   const [isDragging, setIsDragging] = useState15(false);
-  const suppressClickRef = useRef9(false);
-  const latestPositionRef = useRef9(icon.position);
+  const suppressClickRef = useRef10(false);
+  const latestPositionRef = useRef10(icon.position);
   const contextMenuItems = resolveIconContextMenuItems(
     icon.contextMenuItems,
     icon
   );
-  function removeDragPreview() {
-    dragPreviewRef.current?.remove();
-    dragPreviewRef.current = null;
-  }
-  useEffect8(() => removeDragPreview, []);
   function handlePointerDown(event) {
     if (event.button !== 0 || icon.disabled) {
       return;
@@ -4685,22 +4885,19 @@ function NuIconGridItem({
     }
     const deltaX = event.clientX - dragStart.clientX;
     const deltaY = event.clientY - dragStart.clientY;
-    if (!isDraggingRef.current && Math.max(Math.abs(deltaX), Math.abs(deltaY)) < DRAG_THRESHOLD) {
+    if (!isDraggingRef.current && Math.max(Math.abs(deltaX), Math.abs(deltaY)) < DRAG_THRESHOLD2) {
       return;
     }
     if (!isDraggingRef.current) {
       isDraggingRef.current = true;
       setIsDragging(true);
-      dragPreviewRef.current = createDragPreview(event.currentTarget);
-    }
-    if (dragPreviewRef.current) {
-      moveDragPreview(
-        dragPreviewRef.current,
+      dragDrop.beginDrag(
+        { data: icon, id: icon.id, type: "icon" },
         event.currentTarget,
-        event.clientX,
-        event.clientY
+        "icon-grid"
       );
     }
+    dragDrop.moveDrag(event.clientX, event.clientY);
     const gridRect = gridElement.getBoundingClientRect();
     const iconRect = event.currentTarget.getBoundingClientRect();
     const position = {
@@ -4730,7 +4927,6 @@ function NuIconGridItem({
       event.currentTarget.releasePointerCapture(event.pointerId);
     }
     dragStartRef.current = void 0;
-    removeDragPreview();
     if (!isDraggingRef.current) {
       return;
     }
@@ -4738,6 +4934,12 @@ function NuIconGridItem({
     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(
@@ -4828,12 +5030,12 @@ function NuIconGridItem({
         style: { left: icon.position.x, top: icon.position.y },
         type: "button",
         children: [
-          /* @__PURE__ */ jsx35("span", { "aria-hidden": "true", className: "nu-icon-grid__glyph", children: typeof icon.icon === "string" ? /* @__PURE__ */ jsx35("img", { alt: "", draggable: false, src: icon.icon }) : icon.icon }),
-          /* @__PURE__ */ jsx35("span", { className: "nu-icon-grid__label", children: renderMnemonicText(icon.label) })
+          /* @__PURE__ */ jsx36("span", { "aria-hidden": "true", className: "nu-icon-grid__glyph", children: typeof icon.icon === "string" ? /* @__PURE__ */ jsx36("img", { alt: "", draggable: false, src: icon.icon }) : icon.icon }),
+          /* @__PURE__ */ jsx36("span", { className: "nu-icon-grid__label", children: renderMnemonicText(icon.label) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       PopupMenu,
       {
         anchor: contextMenu.anchor,
@@ -4846,26 +5048,38 @@ function NuIconGridItem({
 }
 function NuIconGrid({
   accepts,
+  acceptsDrop,
   className,
   contextMenuItems: contextMenuItemsSource,
   defaultArrangeMode,
   dropTarget = false,
+  onDragOut,
   onIconDrop,
   onIconMoveOut,
+  onDrop,
   onContextMenu,
   onPointerDown,
   ...props
 }) {
   const [gridElement, setGridElement] = useState15(null);
   const manager = useNuIconGridContext();
-  const hasAppliedDefaultArrangementRef = useRef9(false);
+  const hasAppliedDefaultArrangementRef = useRef10(false);
   const arrangeIcons = manager.arrangeIcons;
   const setGridSize = manager.setGridSize;
   const contextMenu = usePopupMenu();
-  const contextMenuItems = useMemo8(
+  const contextMenuItems = useMemo9(
     () => resolveGridContextMenuItems(contextMenuItemsSource, manager),
     [contextMenuItemsSource, manager]
   );
+  const sharedDropTargetOptions = useMemo9(
+    () => onDrop ? {
+      accepts: (item) => item.type !== "icon" && acceptsDrop?.(item) !== false,
+      onDrop,
+      type: "icon-grid"
+    } : void 0,
+    [acceptsDrop, onDrop]
+  );
+  useNuDropTarget(gridElement, sharedDropTargetOptions);
   useLayoutEffect4(() => {
     if (!gridElement) {
       return;
@@ -4930,16 +5144,17 @@ function NuIconGrid({
       ref: setGridElement,
       role: "group",
       children: [
-        manager.icons.map((icon) => /* @__PURE__ */ jsx35(
+        manager.icons.map((icon) => /* @__PURE__ */ jsx36(
           NuIconGridItem,
           {
             gridElement,
             icon,
+            onDragOut,
             onIconMoveOut
           },
           icon.id
         )),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           PopupMenu,
           {
             anchor: contextMenu.anchor,
@@ -4956,11 +5171,11 @@ function NuIconGrid({
 // src/components/IconGrid/NuIconProvider.tsx
 import {
   useCallback as useCallback5,
-  useMemo as useMemo9,
-  useRef as useRef10,
+  useMemo as useMemo10,
+  useRef as useRef11,
   useState as useState16
 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var GRID_PADDING = 12;
 var ICON_CELL_HEIGHT = 104;
 var ICON_CELL_WIDTH = 104;
@@ -5025,8 +5240,8 @@ function NuIconProvider({
   children,
   defaultIcons = []
 }) {
-  const idRef = useRef10(defaultIcons.length);
-  const gridSizeRef = useRef10({ height: 0, width: 0 });
+  const idRef = useRef11(defaultIcons.length);
+  const gridSizeRef = useRef11({ height: 0, width: 0 });
   const [icons, setIcons] = useState16(
     () => getInitialIcons(defaultIcons)
   );
@@ -5085,7 +5300,7 @@ function NuIconProvider({
   const setGridSize = useCallback5((size) => {
     gridSizeRef.current = size;
   }, []);
-  const contextValue = useMemo9(
+  const contextValue = useMemo10(
     () => ({
       addIcon,
       arrangeIcons,
@@ -5108,19 +5323,19 @@ function NuIconProvider({
       updateIcon
     ]
   );
-  return /* @__PURE__ */ jsx36(NuIconContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx37(NuIconContext.Provider, { value: contextValue, children });
 }
 
 // src/components/ComboBox/ComboBox.tsx
 import {
   useEffect as useEffect9,
   useId as useId5,
-  useMemo as useMemo10,
-  useRef as useRef11,
+  useMemo as useMemo11,
+  useRef as useRef12,
   useState as useState17
 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 function flattenComboBoxOptions(data) {
   const options = [];
   data.forEach((group) => {
@@ -5161,16 +5376,16 @@ function ComboBox({
   value,
   ...props
 }) {
-  const rootRef = useRef11(null);
-  const inputRef = useRef11(null);
-  const fieldRef = useRef11(null);
-  const popupRef = useRef11(null);
+  const rootRef = useRef12(null);
+  const inputRef = useRef12(null);
+  const fieldRef = useRef12(null);
+  const popupRef = useRef12(null);
   const generatedId = useId5();
   const fieldId = `${generatedId}-combo-box`;
   const labelId = `${fieldId}-label`;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const [open, setOpen] = useState17(false);
-  const options = useMemo10(() => flattenComboBoxOptions(data), [data]);
+  const options = useMemo11(() => flattenComboBoxOptions(data), [data]);
   const isValueControlled = value !== void 0;
   const isInputControlled = inputValueProp !== void 0;
   const [uncontrolledValue, setUncontrolledValue] = useState17(() => defaultValue);
@@ -5179,13 +5394,13 @@ function ComboBox({
     () => defaultInputValue ?? initialSelectedOption?.item.name.text ?? ""
   );
   const resolvedValue = isValueControlled ? value : uncontrolledValue;
-  const selectedOption = useMemo10(
+  const selectedOption = useMemo11(
     () => findComboBoxOption(options, resolvedValue),
     [options, resolvedValue]
   );
   const resolvedInputValue = isInputControlled ? inputValueProp ?? "" : uncontrolledInputValue;
   const normalizedFilter = resolvedInputValue.trim().toLowerCase();
-  const filteredData = useMemo10(() => {
+  const filteredData = useMemo11(() => {
     if (!normalizedFilter) {
       return data;
     }
@@ -5196,7 +5411,7 @@ function ComboBox({
       )
     })).filter((group) => group.items.length > 0);
   }, [data, normalizedFilter]);
-  const filteredOptions = useMemo10(
+  const filteredOptions = useMemo11(
     () => flattenComboBoxOptions(filteredData).filter(
       (option) => !option.item.disabled
     ),
@@ -5288,7 +5503,7 @@ function ComboBox({
       ref: rootRef,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           "label",
           {
             className: cx("nu-combo-box__label", slotClassNames?.label),
@@ -5311,7 +5526,7 @@ function ComboBox({
                   ref: fieldRef,
                   style: slotStyles?.field,
                   children: [
-                    /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx38(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -5320,7 +5535,7 @@ function ComboBox({
                         children: "["
                       }
                     ),
-                    /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx38(
                       "span",
                       {
                         className: cx(
@@ -5328,7 +5543,7 @@ function ComboBox({
                           slotClassNames?.inputShell
                         ),
                         style: slotStyles?.inputShell,
-                        children: /* @__PURE__ */ jsx37(
+                        children: /* @__PURE__ */ jsx38(
                           "input",
                           {
                             "aria-autocomplete": "list",
@@ -5355,7 +5570,7 @@ function ComboBox({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx38(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -5367,7 +5582,7 @@ function ComboBox({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(
                 ControlOpener,
                 {
                   "aria-label": open ? "Collapse list" : "Expand list",
@@ -5385,7 +5600,7 @@ function ComboBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx37(
+        hint ? /* @__PURE__ */ jsx38(
           "span",
           {
             className: cx("nu-combo-box__hint", slotClassNames?.hint),
@@ -5395,7 +5610,7 @@ function ComboBox({
           }
         ) : null,
         open && popupRoot ? createPortal3(
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             "div",
             {
               className: cx("nu-combo-box__popup", slotClassNames?.popup),
@@ -5405,12 +5620,12 @@ function ComboBox({
                 themePortalStyle,
                 slotStyles?.popup
               ),
-              children: /* @__PURE__ */ jsx37(
+              children: /* @__PURE__ */ jsx38(
                 "div",
                 {
                   className: cx("nu-combo-box__listbox", slotClassNames?.listbox),
                   style: slotStyles?.listbox,
-                  children: /* @__PURE__ */ jsx37(
+                  children: /* @__PURE__ */ jsx38(
                     ListBox,
                     {
                       data: filteredData,
@@ -5443,7 +5658,7 @@ function ComboBox({
 import {
   Fragment as Fragment6
 } from "react";
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 var COMMAND_BUTTON_GLYPH_NAMES = /* @__PURE__ */ new Set([
   "check-fill",
   "check-mark",
@@ -5484,7 +5699,7 @@ function CommandButton({
   const hasMenu = menuItems.length > 0;
   const showCaret = dropdown || hasMenu;
   const resolvedToggled = toggled ?? pressed;
-  const resolvedIcon = typeof icon === "string" && isCommandButtonGlyphName(icon) ? /* @__PURE__ */ jsx38(NuGlyph, { name: icon }) : icon ?? null;
+  const resolvedIcon = typeof icon === "string" && isCommandButtonGlyphName(icon) ? /* @__PURE__ */ jsx39(NuGlyph, { name: icon }) : icon ?? null;
   function handleClick(event) {
     onClick?.(event);
     if (event.defaultPrevented || !hasMenu) {
@@ -5509,7 +5724,7 @@ function CommandButton({
         type,
         onClick: handleClick,
         children: [
-          resolvedIcon ? /* @__PURE__ */ jsx38(
+          resolvedIcon ? /* @__PURE__ */ jsx39(
             "span",
             {
               className: cx(
@@ -5521,7 +5736,7 @@ function CommandButton({
               children: resolvedIcon
             }
           ) : null,
-          children ? /* @__PURE__ */ jsx38(
+          children ? /* @__PURE__ */ jsx39(
             "span",
             {
               className: cx(
@@ -5533,7 +5748,7 @@ function CommandButton({
               children: renderMnemonicNode(children)
             }
           ) : null,
-          showCaret ? /* @__PURE__ */ jsx38(
+          showCaret ? /* @__PURE__ */ jsx39(
             "span",
             {
               className: cx(
@@ -5542,13 +5757,13 @@ function CommandButton({
                 slotClassNames?.caret
               ),
               style: slotStyles?.caret,
-              children: /* @__PURE__ */ jsx38(NuGlyph, { name: "dropdown-arrow" })
+              children: /* @__PURE__ */ jsx39(NuGlyph, { name: "dropdown-arrow" })
             }
           ) : null
         ]
       }
     ),
-    hasMenu ? /* @__PURE__ */ jsx38(
+    hasMenu ? /* @__PURE__ */ jsx39(
       PopupMenu,
       {
         anchor: popupMenu.anchor,
@@ -5563,8 +5778,8 @@ function CommandButton({
 }
 
 // src/components/CrtGlitch/CrtGlitch.tsx
-import { useEffect as useEffect10, useId as useId6, useRef as useRef12 } from "react";
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useEffect as useEffect10, useId as useId6, useRef as useRef13 } from "react";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 var DEFAULT_INTERVAL_MS = 3e3;
 var DEFAULT_DURATION_MS = 2500;
 var DEFAULT_TOP_LEVEL_RATIO = 1 / 3;
@@ -5590,12 +5805,12 @@ function NuCrtGlitch({
   topLevelRatio = DEFAULT_TOP_LEVEL_RATIO
 }) {
   const filterId = useId6().replace(/:/g, "");
-  const turbulenceRef = useRef12(null);
-  const warpRef = useRef12(null);
-  const rOffsetRef = useRef12(null);
-  const bOffsetRef = useRef12(null);
-  const rafRef = useRef12(null);
-  const targetElRef = useRef12(null);
+  const turbulenceRef = useRef13(null);
+  const warpRef = useRef13(null);
+  const rOffsetRef = useRef13(null);
+  const bOffsetRef = useRef13(null);
+  const rafRef = useRef13(null);
+  const targetElRef = useRef13(null);
   useEffect10(() => {
     if (!enabled) {
       return;
@@ -5698,7 +5913,7 @@ function NuCrtGlitch({
       }
     };
   }, [durationMs, enabled, filterId, intervalMs, targetSelector, topLevelRatio]);
-  return /* @__PURE__ */ jsx39("svg", { "aria-hidden": "true", height: "0", style: { position: "absolute" }, width: "0", children: /* @__PURE__ */ jsx39("defs", { children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx40("svg", { "aria-hidden": "true", height: "0", style: { position: "absolute" }, width: "0", children: /* @__PURE__ */ jsx40("defs", { children: /* @__PURE__ */ jsxs23(
     "filter",
     {
       "color-interpolation-filters": "sRGB",
@@ -5708,7 +5923,7 @@ function NuCrtGlitch({
       x: "-15%",
       y: "-5%",
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           "feTurbulence",
           {
             baseFrequency: "0.001 0.045",
@@ -5719,7 +5934,7 @@ function NuCrtGlitch({
             type: "turbulence"
           }
         ),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           "feDisplacementMap",
           {
             in: "SourceGraphic",
@@ -5731,8 +5946,8 @@ function NuCrtGlitch({
             yChannelSelector: "A"
           }
         ),
-        /* @__PURE__ */ jsx39("feOffset", { dx: 0, dy: 0, in: "warped", ref: rOffsetRef, result: "rOff" }),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40("feOffset", { dx: 0, dy: 0, in: "warped", ref: rOffsetRef, result: "rOff" }),
+        /* @__PURE__ */ jsx40(
           "feColorMatrix",
           {
             in: "rOff",
@@ -5741,7 +5956,7 @@ function NuCrtGlitch({
             values: "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0"
           }
         ),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           "feColorMatrix",
           {
             in: "warped",
@@ -5750,8 +5965,8 @@ function NuCrtGlitch({
             values: "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0"
           }
         ),
-        /* @__PURE__ */ jsx39("feOffset", { dx: 0, dy: 0, in: "warped", ref: bOffsetRef, result: "bOff" }),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40("feOffset", { dx: 0, dy: 0, in: "warped", ref: bOffsetRef, result: "bOff" }),
+        /* @__PURE__ */ jsx40(
           "feColorMatrix",
           {
             in: "bOff",
@@ -5760,8 +5975,8 @@ function NuCrtGlitch({
             values: "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0"
           }
         ),
-        /* @__PURE__ */ jsx39("feBlend", { in: "rOnly", in2: "gOnly", mode: "screen", result: "rg" }),
-        /* @__PURE__ */ jsx39("feBlend", { in: "rg", in2: "bOnly", mode: "screen" })
+        /* @__PURE__ */ jsx40("feBlend", { in: "rOnly", in2: "gOnly", mode: "screen", result: "rg" }),
+        /* @__PURE__ */ jsx40("feBlend", { in: "rg", in2: "bOnly", mode: "screen" })
       ]
     }
   ) }) });
@@ -5773,8 +5988,8 @@ import {
   useCallback as useCallback6,
   useEffect as useEffect11,
   useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo11,
-  useRef as useRef13,
+  useMemo as useMemo12,
+  useRef as useRef14,
   useState as useState18
 } from "react";
 
@@ -5813,14 +6028,14 @@ function renderListViewCellValue(row, column) {
 import { memo as memo3 } from "react";
 
 // src/components/ListView/internals/ListViewCheckControl.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function ListViewCheckControl({
   isChecked,
   onActivate,
   onToggleCheck,
   uncheckedShape
 }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "button",
     {
       "aria-label": isChecked ? "Uncheck row" : "Check row",
@@ -5833,13 +6048,13 @@ function ListViewCheckControl({
         onToggleCheck();
       },
       type: "button",
-      children: /* @__PURE__ */ jsx40(
+      children: /* @__PURE__ */ jsx41(
         "span",
         {
           "aria-hidden": "true",
           className: "nu-list-view__check-box",
           "data-unchecked-shape": uncheckedShape,
-          children: isChecked ? /* @__PURE__ */ jsx40(
+          children: isChecked ? /* @__PURE__ */ jsx41(
             NuGlyph,
             {
               className: "nu-list-view__check-indicator",
@@ -5853,7 +6068,7 @@ function ListViewCheckControl({
 }
 
 // src/components/ListView/internals/ListViewRow.tsx
-import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
 function ListViewRowInner({
   columns,
   isActive,
@@ -5905,7 +6120,7 @@ function ListViewRowInner({
         "--nu-list-view-columns": templateColumns
       },
       children: [
-        showCheckBox ? /* @__PURE__ */ jsx41("span", { className: "nu-list-view__check-cell", role: "gridcell", children: /* @__PURE__ */ jsx41(
+        showCheckBox ? /* @__PURE__ */ jsx42("span", { className: "nu-list-view__check-cell", role: "gridcell", children: /* @__PURE__ */ jsx42(
           ListViewCheckControl,
           {
             isChecked,
@@ -5914,7 +6129,7 @@ function ListViewRowInner({
             uncheckedShape
           }
         ) }) : null,
-        columns.map((column) => /* @__PURE__ */ jsx41(
+        columns.map((column) => /* @__PURE__ */ jsx42(
           "span",
           {
             className: [
@@ -5934,7 +6149,7 @@ function ListViewRowInner({
 var ListViewRow = memo3(ListViewRowInner);
 
 // src/components/ListView/ListView.tsx
-import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
 function ListViewInner({
   activeRowId: activeRowIdProp,
   checkedIds,
@@ -5952,9 +6167,9 @@ function ListViewInner({
   uncheckedShape = "box",
   ...props
 }, ref) {
-  const rootRef = useRef13(null);
-  const rowRefs = useRef13({});
-  const selectableRows = useMemo11(
+  const rootRef = useRef14(null);
+  const rowRefs = useRef14({});
+  const selectableRows = useMemo12(
     () => data.filter((row) => !row.disabled),
     [data]
   );
@@ -5964,7 +6179,7 @@ function ListViewInner({
   );
   const activeRowId = activeRowIdProp !== void 0 ? activeRowIdProp : uncontrolledActiveRowId;
   const resolvedActiveRowId = activeRowId && selectableRows.some((row) => row.id === activeRowId) ? activeRowId : getInitialActiveRowId(selectableRows, selectedId);
-  const templateColumns = useMemo11(() => {
+  const templateColumns = useMemo12(() => {
     const checkboxColumn = showCheckBox ? "var(--nu-glyph-cell-size)" : null;
     const dataColumns = columns.map(
       (column) => column.width ?? "minmax(0, 1fr)"
@@ -6122,8 +6337,8 @@ function ListViewInner({
               "--nu-list-view-columns": templateColumns
             },
             children: [
-              showCheckBox ? /* @__PURE__ */ jsx42("span", { className: "nu-list-view__header-cell", role: "columnheader" }) : null,
-              columns.map((column) => /* @__PURE__ */ jsx42(
+              showCheckBox ? /* @__PURE__ */ jsx43("span", { className: "nu-list-view__header-cell", role: "columnheader" }) : null,
+              columns.map((column) => /* @__PURE__ */ jsx43(
                 "span",
                 {
                   className: [
@@ -6139,7 +6354,7 @@ function ListViewInner({
             ]
           }
         ),
-        /* @__PURE__ */ jsx42("div", { className: "nu-list-view__body", children: data.length > 0 ? data.map((row) => /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43("div", { className: "nu-list-view__body", children: data.length > 0 ? data.map((row) => /* @__PURE__ */ jsx43(
           ListViewRow,
           {
             columns,
@@ -6156,7 +6371,7 @@ function ListViewInner({
             uncheckedShape
           },
           row.id
-        )) : /* @__PURE__ */ jsx42("div", { className: "nu-list-view__empty", children: emptyText }) })
+        )) : /* @__PURE__ */ jsx43("div", { className: "nu-list-view__empty", children: emptyText }) })
       ]
     }
   );
@@ -6167,8 +6382,8 @@ var ListView = forwardRef2(ListViewInner);
 import {
   useEffect as useEffect12,
   useId as useId7,
-  useMemo as useMemo12,
-  useRef as useRef14,
+  useMemo as useMemo13,
+  useRef as useRef15,
   useState as useState19
 } from "react";
 
@@ -6334,7 +6549,7 @@ function getMaskedFieldState(mask, rawValue) {
 }
 
 // src/components/MaskedField/MaskedField.tsx
-import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
 function MaskedField({
   "aria-invalid": ariaInvalid,
   className,
@@ -6357,7 +6572,7 @@ function MaskedField({
   const fieldId = id ?? generatedId;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const isControlled = value !== void 0;
-  const hasMountedRef = useRef14(false);
+  const hasMountedRef = useRef15(false);
   const [uncontrolledValue, setUncontrolledValue] = useState19(
     () => defaultValue == null ? "" : getMaskedFieldState(mask, String(defaultValue)).formattedValue
   );
@@ -6367,7 +6582,7 @@ function MaskedField({
     rawResolvedValue
   );
   const resolvedAriaInvalid = ariaInvalid ?? (isInvalid ? true : void 0);
-  const maskInputMode = useMemo12(
+  const maskInputMode = useMemo13(
     () => props.inputMode === void 0 ? getTextMaskInputMode(mask) : void 0,
     [mask, props.inputMode]
   );
@@ -6418,7 +6633,7 @@ function MaskedField({
       htmlFor: fieldId,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           "span",
           {
             className: cx("nu-masked-field__label", slotClassNames?.label),
@@ -6432,7 +6647,7 @@ function MaskedField({
             className: cx("nu-masked-field__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx44(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -6441,7 +6656,7 @@ function MaskedField({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx44(
                 "span",
                 {
                   className: cx(
@@ -6449,7 +6664,7 @@ function MaskedField({
                     slotClassNames?.inputShell
                   ),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ jsx43(
+                  children: /* @__PURE__ */ jsx44(
                     "input",
                     {
                       ...props,
@@ -6467,7 +6682,7 @@ function MaskedField({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx44(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -6479,7 +6694,7 @@ function MaskedField({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx43(
+        hint ? /* @__PURE__ */ jsx44(
           "span",
           {
             className: cx("nu-masked-field__hint", slotClassNames?.hint),
@@ -6497,7 +6712,7 @@ function MaskedField({
 import {
   useState as useState20
 } from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function Memo({
   background,
   className,
@@ -6527,7 +6742,7 @@ function Memo({
     onValueChange?.(event.target.value);
     onChange?.(event);
   }
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: ["nu-memo", className].filter(Boolean).join(" "),
@@ -6540,7 +6755,7 @@ function Memo({
         "--nu-memo-focus-text": focusTextColor,
         "--nu-memo-text": textColor
       },
-      children: /* @__PURE__ */ jsx44("div", { className: "nu-memo__viewport", children: /* @__PURE__ */ jsx44(
+      children: /* @__PURE__ */ jsx45("div", { className: "nu-memo__viewport", children: /* @__PURE__ */ jsx45(
         "textarea",
         {
           ...props,
@@ -6556,11 +6771,11 @@ function Memo({
 // src/components/PageControl/PageControl.tsx
 import {
   useId as useId8,
-  useMemo as useMemo13,
-  useRef as useRef15,
+  useMemo as useMemo14,
+  useRef as useRef16,
   useState as useState21
 } from "react";
-import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
 function PageControl({
   activePageId: activePageIdProp,
   className,
@@ -6574,12 +6789,12 @@ function PageControl({
 }) {
   const generatedId = useId8();
   const isControlled = activePageIdProp !== void 0;
-  const tabRefs = useRef15({});
+  const tabRefs = useRef16({});
   const [uncontrolledActivePageId, setUncontrolledActivePageId] = useState21(
     () => defaultActivePageId ?? pages.find((page) => !page.disabled)?.id ?? pages[0]?.id
   );
   const activePageId = isControlled ? activePageIdProp : uncontrolledActivePageId;
-  const resolvedActivePage = useMemo13(() => {
+  const resolvedActivePage = useMemo14(() => {
     const byId = pages.find(
       (page) => page.id === activePageId && !page.disabled
     );
@@ -6656,7 +6871,7 @@ function PageControl({
         slotStyles?.root
       ),
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           "div",
           {
             className: cx("nu-page-control__tabs", slotClassNames?.tabs),
@@ -6667,7 +6882,7 @@ function PageControl({
               const isActive = page.id === resolvedActivePage?.id;
               const panelId = `${generatedId}-panel-${page.id}`;
               const tabId = `${generatedId}-tab-${page.id}`;
-              return /* @__PURE__ */ jsx45(
+              return /* @__PURE__ */ jsx46(
                 "button",
                 {
                   "aria-controls": panelId,
@@ -6691,7 +6906,7 @@ function PageControl({
             })
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           "div",
           {
             "aria-labelledby": resolvedActivePage ? `${generatedId}-tab-${resolvedActivePage.id}` : void 0,
@@ -6708,7 +6923,7 @@ function PageControl({
 }
 
 // src/components/Panel/Panel.tsx
-import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
 function Panel({
   children,
   className,
@@ -6726,7 +6941,7 @@ function Panel({
       className: cx("nu-panel", slotClassNames?.root, className),
       style: mergeSlotStyle(props.style, slotStyles?.root),
       children: [
-        title ? /* @__PURE__ */ jsx46(
+        title ? /* @__PURE__ */ jsx47(
           "header",
           {
             className: cx("nu-panel__header", slotClassNames?.header),
@@ -6734,7 +6949,7 @@ function Panel({
             children: renderMnemonicText(title)
           }
         ) : null,
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(
           "div",
           {
             className: cx(
@@ -6746,7 +6961,7 @@ function Panel({
             children
           }
         ),
-        footer ? /* @__PURE__ */ jsx46(
+        footer ? /* @__PURE__ */ jsx47(
           "footer",
           {
             className: cx("nu-panel__footer", slotClassNames?.footer),
@@ -6762,11 +6977,11 @@ function Panel({
 // src/components/PropertyGrid/PropertyGrid.tsx
 import {
   useId as useId9,
-  useMemo as useMemo14,
-  useRef as useRef16,
+  useMemo as useMemo15,
+  useRef as useRef17,
   useState as useState22
 } from "react";
-import { jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
 function collectGroupIds(entries) {
   const groupIds = /* @__PURE__ */ new Set();
   function visit(nextEntries) {
@@ -6874,23 +7089,23 @@ function PropertyGrid({
   ...props
 }) {
   const editorIdPrefix = useId9();
-  const rowButtonRefs = useRef16({});
-  const groupIds = useMemo14(() => collectGroupIds(entries), [entries]);
+  const rowButtonRefs = useRef17({});
+  const groupIds = useMemo15(() => collectGroupIds(entries), [entries]);
   const isExpandedControlled = expandedIdsProp !== void 0;
   const isActiveControlled = activeIdProp !== void 0;
   const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState22(() => getInitialExpandedIds(entries, defaultExpandedIds));
   const resolvedExpandedIds = expandedIdsProp ?? uncontrolledExpandedIds;
-  const expandedIdSet = useMemo14(
+  const expandedIdSet = useMemo15(
     () => new Set(
       resolvedExpandedIds.filter((expandedId) => groupIds.has(expandedId))
     ),
     [groupIds, resolvedExpandedIds]
   );
-  const rows = useMemo14(
+  const rows = useMemo15(
     () => collectVisibleRows(entries, expandedIdSet),
     [entries, expandedIdSet]
   );
-  const interactiveRows = useMemo14(() => collectInteractiveRows(rows), [rows]);
+  const interactiveRows = useMemo15(() => collectInteractiveRows(rows), [rows]);
   const [uncontrolledActiveId, setUncontrolledActiveId] = useState22(() => getInitialActiveId2(interactiveRows, defaultActiveId));
   const requestedActiveId = isActiveControlled ? activeIdProp : uncontrolledActiveId;
   const resolvedActiveId = requestedActiveId && interactiveRows.some((row) => row.id === requestedActiveId) ? requestedActiveId : interactiveRows[0]?.id;
@@ -7010,7 +7225,7 @@ function PropertyGrid({
     const nextExpandedIds = expandedIdSet.has(entry.id) ? resolvedExpandedIds.filter((expandedId) => expandedId !== entry.id) : [...resolvedExpandedIds, entry.id];
     updateExpandedIds(nextExpandedIds);
   }
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       ...props,
@@ -7021,9 +7236,9 @@ function PropertyGrid({
         ...style,
         "--nu-property-grid-label-width": labelWidth
       },
-      children: /* @__PURE__ */ jsx47("div", { className: "nu-property-grid__body", children: rows.map((row) => {
+      children: /* @__PURE__ */ jsx48("div", { className: "nu-property-grid__body", children: rows.map((row) => {
         if (row.type === "section") {
-          return /* @__PURE__ */ jsx47("div", { className: "nu-property-grid__section", children: renderMnemonicText(row.entry.title) }, row.entry.id);
+          return /* @__PURE__ */ jsx48("div", { className: "nu-property-grid__section", children: renderMnemonicText(row.entry.title) }, row.entry.id);
         }
         if (row.type === "group") {
           const isExpanded = expandedIdSet.has(row.entry.id);
@@ -7036,7 +7251,7 @@ function PropertyGrid({
               "data-expanded": isExpanded || void 0,
               "data-group": true,
               children: [
-                /* @__PURE__ */ jsx47(
+                /* @__PURE__ */ jsx48(
                   "button",
                   {
                     className: "nu-property-grid__label nu-property-grid__label-button",
@@ -7057,17 +7272,17 @@ function PropertyGrid({
                     },
                     type: "button",
                     children: /* @__PURE__ */ jsxs29("span", { className: "nu-property-grid__lead", children: [
-                      /* @__PURE__ */ jsx47("span", { className: "nu-property-grid__expander", children: /* @__PURE__ */ jsx47(
+                      /* @__PURE__ */ jsx48("span", { className: "nu-property-grid__expander", children: /* @__PURE__ */ jsx48(
                         NuGlyph,
                         {
                           name: isExpanded ? "tree-caret-down" : "tree-caret-right"
                         }
                       ) }),
-                      /* @__PURE__ */ jsx47("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
+                      /* @__PURE__ */ jsx48("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
                     ] })
                   }
                 ),
-                /* @__PURE__ */ jsx47("div", { className: "nu-property-grid__editor", children: row.entry.summary ? /* @__PURE__ */ jsx47("div", { className: "nu-property-grid__control", children: row.entry.summary }) : null })
+                /* @__PURE__ */ jsx48("div", { className: "nu-property-grid__editor", children: row.entry.summary ? /* @__PURE__ */ jsx48("div", { className: "nu-property-grid__control", children: row.entry.summary }) : null })
               ]
             },
             row.entry.id
@@ -7081,7 +7296,7 @@ function PropertyGrid({
             "data-active": resolvedActiveId === row.entry.id || void 0,
             "data-disabled": row.entry.disabled || void 0,
             children: [
-              /* @__PURE__ */ jsx47(
+              /* @__PURE__ */ jsx48(
                 "button",
                 {
                   className: "nu-property-grid__label nu-property-grid__label-button",
@@ -7102,8 +7317,8 @@ function PropertyGrid({
                   },
                   type: "button",
                   children: /* @__PURE__ */ jsxs29("span", { className: "nu-property-grid__lead", children: [
-                    /* @__PURE__ */ jsx47("span", { className: "nu-property-grid__expander-placeholder" }),
-                    /* @__PURE__ */ jsx47("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
+                    /* @__PURE__ */ jsx48("span", { className: "nu-property-grid__expander-placeholder" }),
+                    /* @__PURE__ */ jsx48("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
                   ] })
                 }
               ),
@@ -7114,8 +7329,8 @@ function PropertyGrid({
                   id: editorId,
                   onFocusCapture: () => updateActiveId(row.entry.id),
                   children: [
-                    /* @__PURE__ */ jsx47("div", { className: "nu-property-grid__control", children: row.entry.content }),
-                    row.entry.hint ? /* @__PURE__ */ jsx47("div", { className: "nu-property-grid__hint", children: row.entry.hint }) : null
+                    /* @__PURE__ */ jsx48("div", { className: "nu-property-grid__control", children: row.entry.content }),
+                    row.entry.hint ? /* @__PURE__ */ jsx48("div", { className: "nu-property-grid__hint", children: row.entry.hint }) : null
                   ]
                 }
               )
@@ -7129,7 +7344,7 @@ function PropertyGrid({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
 function clamp3(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -7165,7 +7380,7 @@ function ProgressBar({
       role: "progressbar",
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        label ? /* @__PURE__ */ jsx48(
+        label ? /* @__PURE__ */ jsx49(
           "span",
           {
             className: cx("nu-progress-bar__label", slotClassNames?.label),
@@ -7184,7 +7399,7 @@ function ProgressBar({
               slotStyles?.track
             ),
             children: [
-              /* @__PURE__ */ jsx48(
+              /* @__PURE__ */ jsx49(
                 "div",
                 {
                   className: cx("nu-progress-bar__fill", slotClassNames?.fill),
@@ -7197,7 +7412,7 @@ function ProgressBar({
                   )
                 }
               ),
-              showValue ? /* @__PURE__ */ jsx48(
+              showValue ? /* @__PURE__ */ jsx49(
                 "span",
                 {
                   className: cx("nu-progress-bar__value", slotClassNames?.value),
@@ -7208,7 +7423,7 @@ function ProgressBar({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx48(
+        hint ? /* @__PURE__ */ jsx49(
           "span",
           {
             className: cx("nu-progress-bar__hint", slotClassNames?.hint),
@@ -7223,7 +7438,7 @@ function ProgressBar({
 
 // src/components/RadioGroup/RadioButton.tsx
 import { useId as useId10, useState as useState23 } from "react";
-import { jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
 function RadioButton({
   checked,
   className,
@@ -7249,7 +7464,7 @@ function RadioButton({
   }
   return /* @__PURE__ */ jsxs31("label", { className: ["nu-radio-button", className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsxs31("span", { className: "nu-radio-button__main", children: [
-      /* @__PURE__ */ jsx49(
+      /* @__PURE__ */ jsx50(
         "input",
         {
           ...props,
@@ -7262,19 +7477,19 @@ function RadioButton({
           type: "radio"
         }
       ),
-      /* @__PURE__ */ jsx49("span", { "aria-hidden": "true", className: "nu-radio-button__control", children: /* @__PURE__ */ jsxs31("span", { className: "nu-radio-button__disc", children: [
-        /* @__PURE__ */ jsx49(NuGlyph, { className: "nu-radio-button__ring", name: "radio-ring" }),
-        resolvedChecked ? /* @__PURE__ */ jsx49(NuGlyph, { className: "nu-radio-button__fill", name: "radio-fill" }) : null
+      /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "nu-radio-button__control", children: /* @__PURE__ */ jsxs31("span", { className: "nu-radio-button__disc", children: [
+        /* @__PURE__ */ jsx50(NuGlyph, { className: "nu-radio-button__ring", name: "radio-ring" }),
+        resolvedChecked ? /* @__PURE__ */ jsx50(NuGlyph, { className: "nu-radio-button__fill", name: "radio-fill" }) : null
       ] }) }),
-      /* @__PURE__ */ jsx49("span", { className: "nu-radio-button__label", children: renderMnemonicText(label) })
+      /* @__PURE__ */ jsx50("span", { className: "nu-radio-button__label", children: renderMnemonicText(label) })
     ] }),
-    hint ? /* @__PURE__ */ jsx49("span", { className: "nu-radio-button__hint", id: hintId, children: hint }) : null
+    hint ? /* @__PURE__ */ jsx50("span", { className: "nu-radio-button__hint", id: hintId, children: hint }) : null
   ] });
 }
 
 // src/components/RadioGroup/RadioGroup.tsx
 import { useId as useId11, useState as useState24 } from "react";
-import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
 function RadioGroup({
   className,
   defaultValue,
@@ -7309,7 +7524,7 @@ function RadioGroup({
       className: cx("nu-radio-group", slotClassNames?.root, className),
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        label ? /* @__PURE__ */ jsx50(
+        label ? /* @__PURE__ */ jsx51(
           "legend",
           {
             className: cx("nu-radio-group__label", slotClassNames?.label),
@@ -7317,12 +7532,12 @@ function RadioGroup({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx51(
           "div",
           {
             className: cx("nu-radio-group__options", slotClassNames?.options),
             style: slotStyles?.options,
-            children: options.map((option) => /* @__PURE__ */ jsx50(
+            children: options.map((option) => /* @__PURE__ */ jsx51(
               RadioButton,
               {
                 checked: resolvedValue === option.value,
@@ -7341,7 +7556,7 @@ function RadioGroup({
             ))
           }
         ),
-        hint ? /* @__PURE__ */ jsx50(
+        hint ? /* @__PURE__ */ jsx51(
           "span",
           {
             className: cx("nu-radio-group__hint", slotClassNames?.hint),
@@ -7356,14 +7571,14 @@ function RadioGroup({
 }
 
 // src/components/ReportCell/ReportCell.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function ReportCell({
   align = "start",
   className,
   tone = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     "span",
     {
       ...props,
@@ -7381,12 +7596,12 @@ function ReportCell({
 import {
   useEffect as useEffect13,
   useId as useId12,
-  useMemo as useMemo15,
-  useRef as useRef17,
+  useMemo as useMemo16,
+  useRef as useRef18,
   useState as useState25
 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
 function resolveSearchBoxPortalRoot() {
   return document.body;
 }
@@ -7414,11 +7629,11 @@ function SearchBox({
   style,
   ...props
 }) {
-  const rootRef = useRef17(null);
-  const fieldRef = useRef17(null);
-  const inputRef = useRef17(null);
-  const popupRef = useRef17(null);
-  const requestIdRef = useRef17(0);
+  const rootRef = useRef18(null);
+  const fieldRef = useRef18(null);
+  const inputRef = useRef18(null);
+  const popupRef = useRef18(null);
+  const requestIdRef = useRef18(0);
   const generatedId = useId12();
   const fieldId = `${generatedId}-search-box`;
   const labelId = `${fieldId}-label`;
@@ -7431,7 +7646,7 @@ function SearchBox({
   const [selectedValue, setSelectedValue] = useState25(null);
   const normalizedQuery = (isQueryControlled ? queryProp : uncontrolledQuery) ?? "";
   const trimmedQuery = normalizedQuery.trim();
-  const resultOptions = useMemo15(() => {
+  const resultOptions = useMemo16(() => {
     return results.map((item, index) => ({
       item,
       listBoxItem: {
@@ -7445,7 +7660,7 @@ function SearchBox({
       value: getItemId(item, index)
     }));
   }, [getItemDetails, getItemDisabled, getItemId, getItemText, results]);
-  const listBoxData = useMemo15(
+  const listBoxData = useMemo16(
     () => [
       {
         category: null,
@@ -7536,15 +7751,15 @@ function SearchBox({
   }
   function renderPopupContent() {
     if (status === "loading") {
-      return /* @__PURE__ */ jsx52("div", { className: "nu-search-box__status", children: loadingText });
+      return /* @__PURE__ */ jsx53("div", { className: "nu-search-box__status", children: loadingText });
     }
     if (status === "error") {
-      return /* @__PURE__ */ jsx52("div", { className: "nu-search-box__status", children: errorText });
+      return /* @__PURE__ */ jsx53("div", { className: "nu-search-box__status", children: errorText });
     }
     if (trimmedQuery.length < minQueryLength) {
-      return /* @__PURE__ */ jsx52("div", { className: "nu-search-box__status", children: idleText });
+      return /* @__PURE__ */ jsx53("div", { className: "nu-search-box__status", children: idleText });
     }
-    return /* @__PURE__ */ jsx52("div", { className: "nu-search-box__listbox", children: /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsx53("div", { className: "nu-search-box__listbox", children: /* @__PURE__ */ jsx53(
       ListBox,
       {
         data: listBoxData,
@@ -7589,10 +7804,10 @@ function SearchBox({
       ref: rootRef,
       style,
       children: [
-        /* @__PURE__ */ jsx52("label", { className: "nu-search-box__label", htmlFor: fieldId, id: labelId, children: renderMnemonicText(label) }),
+        /* @__PURE__ */ jsx53("label", { className: "nu-search-box__label", htmlFor: fieldId, id: labelId, children: renderMnemonicText(label) }),
         /* @__PURE__ */ jsxs33("span", { className: "nu-search-box__slot", ref: fieldRef, children: [
-          /* @__PURE__ */ jsx52("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "[" }),
-          /* @__PURE__ */ jsx52("span", { className: "nu-search-box__input-shell", children: /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx53("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "[" }),
+          /* @__PURE__ */ jsx53("span", { className: "nu-search-box__input-shell", children: /* @__PURE__ */ jsx53(
             "input",
             {
               "aria-autocomplete": "list",
@@ -7617,11 +7832,11 @@ function SearchBox({
               value: normalizedQuery
             }
           ) }),
-          /* @__PURE__ */ jsx52("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "]" })
+          /* @__PURE__ */ jsx53("span", { "aria-hidden": "true", className: "nu-search-box__bracket", children: "]" })
         ] }),
-        hint ? /* @__PURE__ */ jsx52("span", { className: "nu-search-box__hint", id: hintId, children: hint }) : null,
+        hint ? /* @__PURE__ */ jsx53("span", { className: "nu-search-box__hint", id: hintId, children: hint }) : null,
         open && popupRoot ? createPortal4(
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx53(
             "div",
             {
               className: "nu-search-box__popup",
@@ -7641,10 +7856,10 @@ function SearchBox({
 // src/components/SpinBox/SpinBox.tsx
 import {
   useId as useId13,
-  useMemo as useMemo16,
+  useMemo as useMemo17,
   useState as useState26
 } from "react";
-import { jsx as jsx53, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs34 } from "react/jsx-runtime";
 function clampSpinValue(value, min, max) {
   let nextValue = value;
   if (min !== void 0) {
@@ -7749,11 +7964,11 @@ function SpinBox({
     }
     onKeyDown?.(event);
   }
-  const decrementDisabled = useMemo16(
+  const decrementDisabled = useMemo17(
     () => disabled || min !== void 0 && numericValue <= min,
     [disabled, min, numericValue]
   );
-  const incrementDisabled = useMemo16(
+  const incrementDisabled = useMemo17(
     () => disabled || max !== void 0 && numericValue >= max,
     [disabled, max, numericValue]
   );
@@ -7764,7 +7979,7 @@ function SpinBox({
       htmlFor: fieldId,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           "span",
           {
             className: cx("nu-spin-box__label", slotClassNames?.label),
@@ -7778,7 +7993,7 @@ function SpinBox({
             className: cx("nu-spin-box__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx53(
+              /* @__PURE__ */ jsx54(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -7787,12 +8002,12 @@ function SpinBox({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ jsx53(
+              /* @__PURE__ */ jsx54(
                 "span",
                 {
                   className: cx("nu-spin-box__input-shell", slotClassNames?.inputShell),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ jsx53(
+                  children: /* @__PURE__ */ jsx54(
                     "input",
                     {
                       ...props,
@@ -7811,7 +8026,7 @@ function SpinBox({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx53(
+              /* @__PURE__ */ jsx54(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -7826,7 +8041,7 @@ function SpinBox({
                   className: cx("nu-spin-box__controls", slotClassNames?.controls),
                   style: slotStyles?.controls,
                   children: [
-                    /* @__PURE__ */ jsx53(
+                    /* @__PURE__ */ jsx54(
                       "button",
                       {
                         className: cx("nu-spin-box__button", slotClassNames?.button),
@@ -7837,7 +8052,7 @@ function SpinBox({
                         children: "-"
                       }
                     ),
-                    /* @__PURE__ */ jsx53(
+                    /* @__PURE__ */ jsx54(
                       "button",
                       {
                         className: cx("nu-spin-box__button", slotClassNames?.button),
@@ -7854,7 +8069,7 @@ function SpinBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx53(
+        hint ? /* @__PURE__ */ jsx54(
           "span",
           {
             className: cx("nu-spin-box__hint", slotClassNames?.hint),
@@ -7872,10 +8087,10 @@ function SpinBox({
 import {
   useEffect as useEffect14,
   useId as useId14,
-  useRef as useRef18,
+  useRef as useRef19,
   useState as useState27
 } from "react";
-import { jsx as jsx54, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs35 } from "react/jsx-runtime";
 function clamp4(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -7909,9 +8124,9 @@ function Splitter({
   const [uncontrolledValue, setUncontrolledValue] = useState27(
     clamp4(getSavedValue() ?? defaultValue, min, max)
   );
-  const rootRef = useRef18(null);
-  const dragFrameRef = useRef18(null);
-  const dragValueRef = useRef18(null);
+  const rootRef = useRef19(null);
+  const dragFrameRef = useRef19(null);
+  const dragValueRef = useRef19(null);
   const activeValue = clamp4(
     (isControlled ? value : uncontrolledValue) ?? defaultValue,
     min,
@@ -8042,8 +8257,8 @@ function Splitter({
         "--nu-splitter-value": `${activeValue * 100}%`
       },
       children: [
-        /* @__PURE__ */ jsx54("div", { className: "nu-splitter__pane", id: firstPaneId, children: first }),
-        /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx55("div", { className: "nu-splitter__pane", id: firstPaneId, children: first }),
+        /* @__PURE__ */ jsx55(
           "div",
           {
             "aria-controls": `${firstPaneId} ${secondPaneId}`,
@@ -8056,7 +8271,7 @@ function Splitter({
             onPointerDown: handlePointerDown,
             role: "separator",
             tabIndex: 0,
-            children: /* @__PURE__ */ jsx54(
+            children: /* @__PURE__ */ jsx55(
               "span",
               {
                 "aria-hidden": "true",
@@ -8066,7 +8281,7 @@ function Splitter({
             )
           }
         ),
-        /* @__PURE__ */ jsx54("div", { className: "nu-splitter__pane", id: secondPaneId, children: second })
+        /* @__PURE__ */ jsx55("div", { className: "nu-splitter__pane", id: secondPaneId, children: second })
       ]
     }
   );
@@ -8076,11 +8291,11 @@ function Splitter({
 import {
   useEffect as useEffect15,
   useId as useId15,
-  useMemo as useMemo17,
-  useRef as useRef19,
+  useMemo as useMemo18,
+  useRef as useRef20,
   useState as useState28
 } from "react";
-import { jsx as jsx55, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs36 } from "react/jsx-runtime";
 function clamp5(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -8127,10 +8342,10 @@ function TickBar({
   );
   const [uncontrolledValue, setUncontrolledValue] = useState28(initialValue);
   const [dragging, setDragging] = useState28(false);
-  const trackRef = useRef19(null);
+  const trackRef = useRef20(null);
   const resolvedValue = isControlled ? clamp5(snapToStep(value ?? initialValue, min, safeStep), min, safeMax) : uncontrolledValue;
   const ratio = safeMax === min ? 0 : (resolvedValue - min) / (safeMax - min);
-  const derivedTickCount = useMemo17(() => {
+  const derivedTickCount = useMemo18(() => {
     if (tickCount !== void 0) {
       return Math.max(2, tickCount);
     }
@@ -8229,7 +8444,7 @@ function TickBar({
         slotStyles?.root
       ),
       children: [
-        label ? /* @__PURE__ */ jsx55(
+        label ? /* @__PURE__ */ jsx56(
           "span",
           {
             className: cx("nu-tick-bar__label", slotClassNames?.label),
@@ -8285,19 +8500,19 @@ function TickBar({
                   style: slotStyles?.track,
                   tabIndex: disabled ? -1 : 0,
                   children: [
-                    /* @__PURE__ */ jsx55(
+                    /* @__PURE__ */ jsx56(
                       "div",
                       {
                         className: cx("nu-tick-bar__rail", slotClassNames?.rail),
                         style: slotStyles?.rail
                       }
                     ),
-                    /* @__PURE__ */ jsx55(
+                    /* @__PURE__ */ jsx56(
                       "div",
                       {
                         className: cx("nu-tick-bar__ticks", slotClassNames?.ticks),
                         style: slotStyles?.ticks,
-                        children: Array.from({ length: derivedTickCount }, (_, index) => /* @__PURE__ */ jsx55(
+                        children: Array.from({ length: derivedTickCount }, (_, index) => /* @__PURE__ */ jsx56(
                           "span",
                           {
                             "aria-hidden": "true",
@@ -8308,7 +8523,7 @@ function TickBar({
                         ))
                       }
                     ),
-                    /* @__PURE__ */ jsx55(
+                    /* @__PURE__ */ jsx56(
                       "div",
                       {
                         "aria-hidden": "true",
@@ -8326,7 +8541,7 @@ function TickBar({
                   ]
                 }
               ),
-              showValue ? /* @__PURE__ */ jsx55(
+              showValue ? /* @__PURE__ */ jsx56(
                 "span",
                 {
                   className: cx("nu-tick-bar__value", slotClassNames?.value),
@@ -8337,7 +8552,7 @@ function TickBar({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx55(
+        hint ? /* @__PURE__ */ jsx56(
           "span",
           {
             className: cx("nu-tick-bar__hint", slotClassNames?.hint),
@@ -8352,7 +8567,7 @@ function TickBar({
 }
 
 // src/components/ToolBar/ToolBar.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function ToolBar({
   children,
   className,
@@ -8362,7 +8577,7 @@ function ToolBar({
   wrap = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
       ...props,
@@ -8381,7 +8596,7 @@ function ToolButton({
   slotStyles,
   ...props
 }) {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     CommandButton,
     {
       ...props,
@@ -8411,7 +8626,7 @@ function ToolDropButton({
   uncheckedShape,
   ...props
 }) {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     CommandButton,
     {
       ...props,
@@ -8437,7 +8652,7 @@ function ToolDropButton({
   );
 }
 function ToolSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
       ...props,
@@ -8459,8 +8674,8 @@ import {
   useEffect as useEffect16,
   useId as useId16,
   useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo18,
-  useRef as useRef20,
+  useMemo as useMemo19,
+  useRef as useRef21,
   useState as useState29
 } from "react";
 
@@ -8559,7 +8774,7 @@ function collectVisibleTreeItems(items, expandedIds, depth = 0, guideMask = [],
 
 // src/components/TreeView/internals/TreeViewItem.tsx
 import { memo as memo4 } from "react";
-import { jsx as jsx57, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
 function areTreeViewGuideArraysEqual(previousArray, nextArray) {
   if (previousArray.length !== nextArray.length) {
     return false;
@@ -8654,7 +8869,7 @@ function TreeViewItemInner({
         role: "treeitem",
         children: [
           /* @__PURE__ */ jsxs37("span", { "aria-hidden": "true", className: "nu-tree-view__prefix", children: [
-            guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx57(
+            guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx58(
               "span",
               {
                 className: "nu-tree-view__guide",
@@ -8673,19 +8888,19 @@ function TreeViewItemInner({
                   "--nu-tree-view-origin-offset": originOffset
                 },
                 children: [
-                  depth > 0 ? /* @__PURE__ */ jsx57(
+                  depth > 0 ? /* @__PURE__ */ jsx58(
                     "span",
                     {
                       className: "nu-tree-view__branch",
                       "data-branch": hasNextSibling ? "tee" : "elbow"
                     }
                   ) : null,
-                  hasChildren ? /* @__PURE__ */ jsx57(
+                  hasChildren ? /* @__PURE__ */ jsx58(
                     "span",
                     {
                       className: "nu-tree-view__expander",
                       "data-connector": depth > 0 ? "lead" : void 0,
-                      children: /* @__PURE__ */ jsx57(
+                      children: /* @__PURE__ */ jsx58(
                         "button",
                         {
                           "aria-label": isExpanded ? "Collapse item" : "Expand item",
@@ -8693,7 +8908,7 @@ function TreeViewItemInner({
                           onClick: handleToggleExpanded,
                           tabIndex: -1,
                           type: "button",
-                          children: /* @__PURE__ */ jsx57(
+                          children: /* @__PURE__ */ jsx58(
                             NuGlyph,
                             {
                               name: isExpanded ? "tree-caret-down" : "tree-caret-right"
@@ -8702,7 +8917,7 @@ function TreeViewItemInner({
                         }
                       )
                     }
-                  ) : depth > 0 ? /* @__PURE__ */ jsx57(
+                  ) : depth > 0 ? /* @__PURE__ */ jsx58(
                     "span",
                     {
                       className: "nu-tree-view__expander-placeholder",
@@ -8714,7 +8929,7 @@ function TreeViewItemInner({
             )
           ] }),
           /* @__PURE__ */ jsxs37("span", { className: "nu-tree-view__content", children: [
-            isCheckable ? /* @__PURE__ */ jsx57("span", { className: "nu-tree-view__check-slot", children: /* @__PURE__ */ jsx57(
+            isCheckable ? /* @__PURE__ */ jsx58("span", { className: "nu-tree-view__check-slot", children: /* @__PURE__ */ jsx58(
               "button",
               {
                 "aria-label": isChecked ? "Uncheck item" : "Check item",
@@ -8722,12 +8937,12 @@ function TreeViewItemInner({
                 onClick: handleToggleChecked,
                 tabIndex: -1,
                 type: "button",
-                children: /* @__PURE__ */ jsx57(
+                children: /* @__PURE__ */ jsx58(
                   "span",
                   {
                     className: "nu-tree-view__check-box",
                     "data-unchecked-shape": uncheckedShape,
-                    children: isChecked ? /* @__PURE__ */ jsx57(
+                    children: isChecked ? /* @__PURE__ */ jsx58(
                       NuGlyph,
                       {
                         className: "nu-tree-view__check-mark",
@@ -8738,14 +8953,14 @@ function TreeViewItemInner({
                 )
               }
             ) }) : null,
-            item.icon ? /* @__PURE__ */ jsx57("span", { className: "nu-tree-view__icon", children: item.icon }) : null,
-            /* @__PURE__ */ jsx57("span", { className: "nu-tree-view__title", children: item.title }),
-            item.hint ? /* @__PURE__ */ jsx57("span", { className: "nu-tree-view__hint", children: item.hint }) : null
+            item.icon ? /* @__PURE__ */ jsx58("span", { className: "nu-tree-view__icon", children: item.icon }) : null,
+            /* @__PURE__ */ jsx58("span", { className: "nu-tree-view__title", children: item.title }),
+            item.hint ? /* @__PURE__ */ jsx58("span", { className: "nu-tree-view__hint", children: item.hint }) : null
           ] })
         ]
       }
     ),
-    hasChildren && isExpanded ? /* @__PURE__ */ jsx57("div", { role: "group", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ jsx57(
+    hasChildren && isExpanded ? /* @__PURE__ */ jsx58("div", { role: "group", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ jsx58(
       TreeViewItem,
       {
         depth: depth + 1,
@@ -8781,7 +8996,7 @@ function areTreeViewItemPropsEqual(previousProps, nextProps) {
 var TreeViewItem = memo4(TreeViewItemInner, areTreeViewItemPropsEqual);
 
 // src/components/TreeView/TreeView.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function TreeViewInner({
   className,
   data,
@@ -8796,9 +9011,9 @@ function TreeViewInner({
   uncheckedShape = "box",
   ...props
 }, ref) {
-  const rootRef = useRef20(null);
+  const rootRef = useRef21(null);
   const treeId = useId16();
-  const itemRefs = useRef20({});
+  const itemRefs = useRef21({});
   const isExpandedControlled = expandedIds !== void 0;
   const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState29(() => {
     const expandedFromData = collectExpandedTreeIds(data);
@@ -8809,15 +9024,15 @@ function TreeViewInner({
   });
   const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState29(null);
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
-  const expandedIdSet = useMemo18(
+  const expandedIdSet = useMemo19(
     () => new Set(resolvedExpandedIds),
     [resolvedExpandedIds]
   );
-  const visibleItems = useMemo18(
+  const visibleItems = useMemo19(
     () => collectVisibleTreeItems(data, expandedIdSet),
     [data, expandedIdSet]
   );
-  const selectableItems = useMemo18(
+  const selectableItems = useMemo19(
     () => visibleItems.filter(({ item }) => !item.disabled),
     [visibleItems]
   );
@@ -9032,7 +9247,7 @@ function TreeViewInner({
       setExpandedState
     ]
   );
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     "div",
     {
       ...props,
@@ -9042,7 +9257,7 @@ function TreeViewInner({
       ref: rootRef,
       role: "tree",
       tabIndex: 0,
-      children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx58(
+      children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx59(
         TreeViewItem,
         {
           depth: 0,
@@ -9062,7 +9277,7 @@ function TreeViewInner({
           uncheckedShape
         },
         item.id
-      )) : /* @__PURE__ */ jsx58("div", { className: "nu-tree-view__empty", children: emptyText })
+      )) : /* @__PURE__ */ jsx59("div", { className: "nu-tree-view__empty", children: emptyText })
     }
   );
 }
@@ -9076,8 +9291,8 @@ import {
   useId as useId17,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect5,
-  useMemo as useMemo19,
-  useRef as useRef21,
+  useMemo as useMemo20,
+  useRef as useRef22,
   useState as useState30
 } from "react";
 
@@ -9169,11 +9384,11 @@ function renderTreeListCellValue(item, column) {
 
 // src/components/TreeListView/internals/TreeListViewRow.tsx
 import { memo as memo5 } from "react";
-import { Fragment as Fragment7, jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx60, jsxs as jsxs38 } from "react/jsx-runtime";
 function renderTreeTitleContent(item) {
   return /* @__PURE__ */ jsxs38(Fragment7, { children: [
-    /* @__PURE__ */ jsx59("span", { className: "nu-tree-list-view__title", children: item.title }),
-    item.hint ? /* @__PURE__ */ jsx59("span", { className: "nu-tree-list-view__hint", children: item.hint }) : null
+    /* @__PURE__ */ jsx60("span", { className: "nu-tree-list-view__title", children: item.title }),
+    item.hint ? /* @__PURE__ */ jsx60("span", { className: "nu-tree-list-view__hint", children: item.hint }) : null
   ] });
 }
 function renderReportCellContent(item, column, depth, rowIndex, getCellContent) {
@@ -9213,12 +9428,14 @@ function TreeListViewRowInner({
   depth,
   expandedIdSet,
   getCellContent,
+  getDragItem,
   guideMask,
   guideOffsets,
   hasNextSibling,
   item,
   onActivateItem,
   onDoubleClickItem,
+  onItemDragOut,
   onPopupMenuItem,
   onToggleItemCheck,
   onToggleItemExpanded,
@@ -9240,6 +9457,18 @@ function TreeListViewRowInner({
   const isSelected = itemId === selectedItemId;
   const rowIndex = rowIndexMap.get(itemId) ?? 0;
   const leadOffset = depth > 0 && hasChildren ? 1 : 0;
+  const dragContext = {
+    depth,
+    isLeaf: !hasChildren,
+    item,
+    rowIndex
+  };
+  const dragSource = useNuDragSource({
+    disabled: item.disabled || !getDragItem,
+    getItem: () => getDragItem?.(item, dragContext) ?? false,
+    onDropAccepted: () => onItemDragOut?.(item, dragContext),
+    sourceType: "tree-list-item"
+  });
   function handleActivate() {
     if (item.disabled) {
       return;
@@ -9286,7 +9515,7 @@ function TreeListViewRowInner({
     onToggleItemCheck?.(item, !isChecked);
   }
   return /* @__PURE__ */ jsxs38(Fragment7, { children: [
-    /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx60(
       "div",
       {
         "aria-disabled": item.disabled || void 0,
@@ -9304,6 +9533,10 @@ 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),
         role: "row",
         style: {
@@ -9323,7 +9556,7 @@ function TreeListViewRowInner({
               role: "gridcell",
               children: [
                 /* @__PURE__ */ jsxs38("span", { "aria-hidden": "true", className: "nu-tree-list-view__prefix", children: [
-                  guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx59(
+                  guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx60(
                     "span",
                     {
                       className: "nu-tree-list-view__guide",
@@ -9342,19 +9575,19 @@ function TreeListViewRowInner({
                         "--nu-tree-list-view-origin-offset": originOffset
                       },
                       children: [
-                        depth > 0 ? /* @__PURE__ */ jsx59(
+                        depth > 0 ? /* @__PURE__ */ jsx60(
                           "span",
                           {
                             className: "nu-tree-list-view__branch",
                             "data-branch": hasNextSibling ? "tee" : "elbow"
                           }
                         ) : null,
-                        hasChildren ? /* @__PURE__ */ jsx59(
+                        hasChildren ? /* @__PURE__ */ jsx60(
                           "span",
                           {
                             className: "nu-tree-list-view__expander",
                             "data-connector": depth > 0 ? "lead" : void 0,
-                            children: /* @__PURE__ */ jsx59(
+                            children: /* @__PURE__ */ jsx60(
                               "button",
                               {
                                 "aria-label": isExpanded ? "Collapse item" : "Expand item",
@@ -9362,7 +9595,7 @@ function TreeListViewRowInner({
                                 onClick: handleToggleExpanded,
                                 tabIndex: -1,
                                 type: "button",
-                                children: /* @__PURE__ */ jsx59(
+                                children: /* @__PURE__ */ jsx60(
                                   NuGlyph,
                                   {
                                     name: isExpanded ? "tree-caret-down" : "tree-caret-right"
@@ -9371,7 +9604,7 @@ function TreeListViewRowInner({
                               }
                             )
                           }
-                        ) : depth > 0 ? /* @__PURE__ */ jsx59(
+                        ) : depth > 0 ? /* @__PURE__ */ jsx60(
                           "span",
                           {
                             className: "nu-tree-list-view__expander-placeholder",
@@ -9383,7 +9616,7 @@ function TreeListViewRowInner({
                   )
                 ] }),
                 /* @__PURE__ */ jsxs38("span", { className: "nu-tree-list-view__tree-content", children: [
-                  isCheckable ? /* @__PURE__ */ jsx59("span", { className: "nu-tree-list-view__check-slot", children: /* @__PURE__ */ jsx59(
+                  isCheckable ? /* @__PURE__ */ jsx60("span", { className: "nu-tree-list-view__check-slot", children: /* @__PURE__ */ jsx60(
                     "button",
                     {
                       "aria-label": isChecked ? "Uncheck item" : "Check item",
@@ -9391,12 +9624,12 @@ function TreeListViewRowInner({
                       onClick: handleToggleChecked,
                       tabIndex: -1,
                       type: "button",
-                      children: /* @__PURE__ */ jsx59(
+                      children: /* @__PURE__ */ jsx60(
                         "span",
                         {
                           className: "nu-tree-list-view__check-box",
                           "data-unchecked-shape": uncheckedShape,
-                          children: isChecked ? /* @__PURE__ */ jsx59(
+                          children: isChecked ? /* @__PURE__ */ jsx60(
                             NuGlyph,
                             {
                               className: "nu-tree-list-view__check-mark",
@@ -9407,13 +9640,13 @@ function TreeListViewRowInner({
                       )
                     }
                   ) }) : null,
-                  item.icon ? /* @__PURE__ */ jsx59("span", { className: "nu-tree-list-view__icon", children: item.icon }) : null,
+                  item.icon ? /* @__PURE__ */ jsx60("span", { className: "nu-tree-list-view__icon", children: item.icon }) : null,
                   renderTreeTitleContent(item)
                 ] })
               ]
             },
             column.id
-          ) : /* @__PURE__ */ jsx59(
+          ) : /* @__PURE__ */ jsx60(
             "span",
             {
               className: [
@@ -9436,7 +9669,7 @@ function TreeListViewRowInner({
         )
       }
     ),
-    hasChildren && isExpanded ? /* @__PURE__ */ jsx59("div", { role: "rowgroup", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ jsx59(
+    hasChildren && isExpanded ? /* @__PURE__ */ jsx60("div", { role: "rowgroup", children: (item.children ?? []).map((child, index) => /* @__PURE__ */ jsx60(
       TreeListViewRow,
       {
         activeItemId,
@@ -9445,12 +9678,14 @@ function TreeListViewRowInner({
         depth: depth + 1,
         expandedIdSet,
         getCellContent,
+        getDragItem,
         guideMask: [...guideMask, hasNextSibling],
         guideOffsets: [...guideOffsets, originOffset],
         hasNextSibling: index < (item.children?.length ?? 0) - 1,
         item: child,
         onActivateItem,
         onDoubleClickItem,
+        onItemDragOut,
         onPopupMenuItem,
         onToggleItemCheck,
         onToggleItemExpanded,
@@ -9481,8 +9716,9 @@ var TreeListViewRow = memo5(
 );
 
 // src/components/TreeListView/TreeListView.tsx
-import { jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
 function TreeListViewInner({
+  acceptsDrop,
   activeItemId: activeItemIdProp,
   checkedIds,
   className,
@@ -9494,21 +9730,25 @@ function TreeListViewInner({
   defaultExpandedIds,
   emptyText = "No items",
   expandedIds,
+  getDragItem,
   getCellContent,
   onActiveItemChange,
   onExpandedIdsChange,
   onItemCheckChange,
   onItemDoubleClick,
+  onItemDragOut,
   onItemSelect,
+  onDrop,
   selectedId,
   uncheckedShape = "box",
   ...props
 }, ref) {
-  const rootRef = useRef21(null);
+  const rootRef = useRef22(null);
+  const [rootElement, setRootElement] = useState30(null);
   const treeId = useId17();
-  const itemRefs = useRef21({});
-  const resizeFrameRef = useRef21(null);
-  const resizeStateRef = useRef21(null);
+  const itemRefs = useRef22({});
+  const resizeFrameRef = useRef22(null);
+  const resizeStateRef = useRef22(null);
   const isExpandedControlled = expandedIds !== void 0;
   const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState30(() => {
     const expandedFromData = collectExpandedTreeListIds(data);
@@ -9522,15 +9762,15 @@ function TreeListViewInner({
   const [userColumnWidths, setUserColumnWidths] = useState30({});
   const isActiveControlled = activeItemIdProp !== void 0;
   const resolvedExpandedIds = isExpandedControlled ? expandedIds : uncontrolledExpandedIds;
-  const expandedIdSet = useMemo19(
+  const expandedIdSet = useMemo20(
     () => new Set(resolvedExpandedIds),
     [resolvedExpandedIds]
   );
-  const visibleItems = useMemo19(
+  const visibleItems = useMemo20(
     () => collectVisibleTreeListItems(data, expandedIdSet),
     [data, expandedIdSet]
   );
-  const selectableItems = useMemo19(
+  const selectableItems = useMemo20(
     () => visibleItems.filter(({ item }) => !item.disabled),
     [visibleItems]
   );
@@ -9539,7 +9779,7 @@ function TreeListViewInner({
   const [uncontrolledActiveItemId, setUncontrolledActiveItemId] = useState30(() => defaultActiveItemId ?? resolvedSelectedId);
   const activeItemId = activeItemIdProp !== void 0 ? activeItemIdProp : uncontrolledActiveItemId;
   const resolvedActiveItemId = activeItemId && selectableItems.some((entry) => entry.itemId === activeItemId) ? activeItemId : resolvedSelectedId;
-  const minColumnWidthById = useMemo19(
+  const minColumnWidthById = useMemo20(
     () => Object.fromEntries(
       columns.map(
         (column) => [column.id, column.minWidth ?? 0]
@@ -9547,23 +9787,32 @@ function TreeListViewInner({
     ),
     [columns]
   );
-  const templateColumns = useMemo19(
+  const templateColumns = useMemo20(
     () => getTreeListTemplateColumns(columns, {
       autoColumnWidths,
       userColumnWidths
     }),
     [autoColumnWidths, columns, userColumnWidths]
   );
-  const treeColumnId = useMemo19(
+  const treeColumnId = useMemo20(
     () => getTreeListTreeColumnId(columns),
     [columns]
   );
-  const rowIndexMap = useMemo19(
+  const rowIndexMap = useMemo20(
     () => new Map(
       visibleItems.map((entry, index) => [entry.itemId, index])
     ),
     [visibleItems]
   );
+  const dropTargetOptions = useMemo20(
+    () => onDrop ? { accepts: acceptsDrop, onDrop, type: "tree-list" } : void 0,
+    [acceptsDrop, onDrop]
+  );
+  useNuDropTarget(rootElement, dropTargetOptions);
+  const setRootRef = useCallback8((node) => {
+    rootRef.current = node;
+    setRootElement(node);
+  }, []);
   useEffect17(() => {
     if (!resolvedActiveItemId) {
       return;
@@ -9919,11 +10168,11 @@ function TreeListViewInner({
       className: ["nu-tree-list-view", className].filter(Boolean).join(" "),
       "data-version": dataVersion,
       onKeyDown: handleKeyDown,
-      ref: rootRef,
+      ref: setRootRef,
       role: "treegrid",
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           "div",
           {
             className: "nu-tree-list-view__header",
@@ -9942,8 +10191,8 @@ function TreeListViewInner({
                 "data-column-id": column.id,
                 role: "columnheader",
                 children: [
-                  /* @__PURE__ */ jsx60("span", { className: "nu-tree-list-view__header-label", children: renderMnemonicText(column.title) }),
-                  column.resizable !== false ? /* @__PURE__ */ jsx60(
+                  /* @__PURE__ */ jsx61("span", { className: "nu-tree-list-view__header-label", children: renderMnemonicText(column.title) }),
+                  column.resizable !== false ? /* @__PURE__ */ jsx61(
                     "button",
                     {
                       "aria-label": `Resize ${column.title} column`,
@@ -9959,7 +10208,7 @@ function TreeListViewInner({
             ))
           }
         ),
-        /* @__PURE__ */ jsx60("div", { className: "nu-tree-list-view__body", children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61("div", { className: "nu-tree-list-view__body", children: visibleItems.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx61(
           TreeListViewRow,
           {
             activeItemId: resolvedActiveItemId,
@@ -9968,12 +10217,14 @@ function TreeListViewInner({
             depth: 0,
             expandedIdSet,
             getCellContent: getCellContent ? resolveCellContent : void 0,
+            getDragItem,
             guideMask: [],
             guideOffsets: [],
             hasNextSibling: index < data.length - 1,
             item,
             onActivateItem: activateEntry,
             onDoubleClickItem: onItemDoubleClick ? handleItemDoubleClick : void 0,
+            onItemDragOut,
             onPopupMenuItem: handleItemPopupMenu,
             onToggleItemCheck: handleItemCheckChange,
             onToggleItemExpanded: setExpandedState,
@@ -9987,7 +10238,7 @@ function TreeListViewInner({
             uncheckedShape
           },
           item.id
-        )) : /* @__PURE__ */ jsx60("div", { className: "nu-tree-list-view__empty", children: emptyText }) })
+        )) : /* @__PURE__ */ jsx61("div", { className: "nu-tree-list-view__empty", children: emptyText }) })
       ]
     }
   );
@@ -9998,7 +10249,7 @@ var TreeListView = forwardRef4(TreeListViewInner);
 import {
   useCallback as useCallback9,
   useId as useId18,
-  useMemo as useMemo20,
+  useMemo as useMemo21,
   useState as useState31
 } from "react";
 
@@ -10126,31 +10377,31 @@ var midnightTheme = {
     shellBackground: "#101722",
     appBackground: "#17273b",
     appBackgroundAlt: "#0d1724",
-    chromeBackground: "#d4dde8",
-    panelBackground: "#17273b",
+    chromeBackground: "#36547d",
+    panelBackground: "#192c43",
     panelInsetBackground: "#111e2e",
-    titleBackground: "#d4dde8",
-    menuBackground: "#d4dde8",
-    titleText: "#14233a",
-    textPrimary: "#e6edf7",
-    textMuted: "#aebdcd",
-    textInverse: "#0b1220",
-    mainMenuText: "#0b1220",
-    textAccent: "#ffd166",
-    textHotkey: "#ff7171",
-    buttonFace: "#d4dde8",
-    buttonFaceAlt: "#9baabd",
-    buttonDanger: "#a94d57",
+    titleBackground: "#0b2432",
+    menuBackground: "#1c2945",
+    titleText: "#c2d0e5",
+    textPrimary: "#6b9adb",
+    textMuted: "#65a8ec",
+    textInverse: "#b7caf0",
+    mainMenuText: "#b7caf0",
+    textAccent: "#ffcd57",
+    textHotkey: "#fb0404",
+    buttonFace: "#5074af",
+    buttonFaceAlt: "#3c5372",
+    buttonDanger: "#4e0e15",
     buttonSuccess: "#3c936d",
-    buttonText: "#0b1220",
+    buttonText: "#ffffff",
     fieldBackground: "#09111c",
-    fieldText: "#e6edf7",
-    borderLight: "#e6edf7",
-    borderDark: "#070c14",
-    borderAccent: "#ffd166",
+    fieldText: "#627b9d",
+    borderLight: "#415776",
+    borderDark: "#1d2134",
+    borderAccent: "#3b5681",
     shadowColor: "#070c14",
     panelShadowColor: "rgb(7 12 20 / 0.56)",
-    focusColor: "#ffd166",
+    focusColor: "#af532c",
     windowInactiveOverlay: "rgb(7 12 20 / 0.3)",
     windowModalBackdrop: "rgb(7 12 20 / 0.48)"
   }
@@ -10279,10 +10530,10 @@ function getNuDesktopPatternStyle(mode) {
 }
 
 // src/theme/themeContext.ts
-import { createContext as createContext5, useContext as useContext9 } from "react";
-var NuThemeContext = createContext5(null);
+import { createContext as createContext6, useContext as useContext10 } from "react";
+var NuThemeContext = createContext6(null);
 function useNuTheme() {
-  const context = useContext9(NuThemeContext);
+  const context = useContext10(NuThemeContext);
   if (!context) {
     throw new Error("useNuTheme must be used within a NuThemeProvider.");
   }
@@ -10290,7 +10541,7 @@ function useNuTheme() {
 }
 
 // src/theme/NuThemeProvider.tsx
-import { jsx as jsx61, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
 function NuThemeProvider({
   children,
   className,
@@ -10356,7 +10607,7 @@ function NuThemeProvider({
     },
     [fontSize, onFontSizeChange]
   );
-  const contextValue = useMemo20(
+  const contextValue = useMemo21(
     () => ({
       desktopPatternMode: resolvedDesktopPatternMode,
       fontFamily: resolvedFontFamily,
@@ -10381,7 +10632,7 @@ function NuThemeProvider({
       handleThemeChange
     ]
   );
-  return /* @__PURE__ */ jsx61(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsx62(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs40(
     "div",
     {
       className: ["nu-theme-root", className].filter(Boolean).join(" "),
@@ -10396,7 +10647,7 @@ function NuThemeProvider({
         ...style
       },
       children: [
-        crtGlitch ? /* @__PURE__ */ jsx61(NuCrtGlitch, { ...typeof crtGlitch === "object" ? crtGlitch : {} }) : null,
+        crtGlitch ? /* @__PURE__ */ jsx62(NuCrtGlitch, { ...typeof crtGlitch === "object" ? crtGlitch : {} }) : null,
         children
       ]
     }
@@ -10423,6 +10674,7 @@ export {
   NuAppHostProvider,
   NuCrtGlitch,
   NuDesktop,
+  NuDragDropProvider,
   NuGlyph,
   NuIconGrid,
   NuIconProvider,
@@ -10468,6 +10720,9 @@ export {
   resolveNuTheme,
   useAppHostMenu,
   useMainMenuState,
+  useNuDragDrop,
+  useNuDragSource,
+  useNuDropTarget,
   useNuIconManager,
   useNuTheme,
   useNuWindowManager,