@deadragdoll/reactnu 0.1.49 → 0.1.56

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";
 
@@ -375,6 +375,7 @@ function MainMenuList({
                         ) : isChecked ? /* @__PURE__ */ jsx3(NuGlyph, { name: "check-mark" }) : null
                       }
                     ) : null,
+                    isPopupRow ? /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: "nu-main-menu__icon", children: item.icon }) : null,
                     /* @__PURE__ */ jsx3("span", { className: "nu-main-menu__label", children: renderItemLabel(item) }),
                     isPopupRow ? /* @__PURE__ */ jsx3("span", { className: "nu-main-menu__shortcut", children: resolveItemShortcut(item) }) : null,
                     isPopupRow ? /* @__PURE__ */ jsx3("span", { className: "nu-main-menu__submenu-arrow", children: hasChildren ? "\u25B6" : "" }) : null
@@ -662,10 +663,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 +827,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 +903,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 +1153,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 +1167,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 +1179,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 +1209,7 @@ function ListBoxItemViewInner({
   function handleToggleCheck() {
     onToggleCheck(itemId);
   }
-  const checkControl = item.checkable ? /* @__PURE__ */ jsx9(
+  const checkControl = item.checkable ? /* @__PURE__ */ jsx10(
     ListBoxCheckControl,
     {
       isChecked,
@@ -997,6 +1236,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 +1247,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 +1256,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 +1275,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 +1287,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 +1299,7 @@ function ListBoxGroupView({
           itemId,
           onActivate: onActivateItem,
           onDoubleClick: onDoubleClickItem,
+          onDragOut: onItemDragOut,
           onPopupMenu: onPopupMenuItem,
           onToggleCheck: onToggleItemCheck,
           registerItemRef,
@@ -1066,38 +1313,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 +1505,7 @@ function ListBoxInner({
         break;
     }
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       ...props,
@@ -1252,18 +1513,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 +1536,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 +1572,7 @@ function Stack({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       ...props,
@@ -1329,7 +1592,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 +1626,7 @@ function MdiWindowPickerDialog({
   onClose,
   windows
 }) {
-  const resolvedWindows = useMemo3(
+  const resolvedWindows = useMemo4(
     () => windows.filter(
       (windowEntry) => isPickerEligibleWindow(windowEntry) && (!domain || windowEntry.domain === domain)
     ),
@@ -1383,7 +1646,7 @@ function MdiWindowPickerDialog({
     onClose();
   }
   return /* @__PURE__ */ jsxs8(Stack, { gap: "md", children: [
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       ListBox,
       {
         data: [
@@ -1392,6 +1655,7 @@ function MdiWindowPickerDialog({
             items: resolvedWindows.map((windowEntry, index) => ({
               id: windowEntry.id,
               name: {
+                icon: windowEntry.icon,
                 text: `${index + 1} ${formatPickerWindowTitle(windows, windowEntry)}`
               },
               selected: windowEntry.id === activeWindowId
@@ -1418,14 +1682,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 +1728,7 @@ function openMdiWindowPicker(bridge) {
   bridge.openDialog({
     appModal: true,
     border: "double",
-    content: ({ close }) => /* @__PURE__ */ jsx14(
+    content: ({ close }) => /* @__PURE__ */ jsx15(
       MdiWindowPickerDialog,
       {
         activeWindowId,
@@ -1507,6 +1771,7 @@ function buildStandardMdiMenuItems(bridge) {
     ...mdiWindows.map((windowEntry, index) => ({
       checked: windowEntry.id === activeWindowId,
       id: `mdi.window.${windowEntry.id}`,
+      icon: windowEntry.icon,
       onSelect: () => bridge?.activateWindow(windowEntry.id),
       text: `${index + 1} ${windowEntry.title}`
     })),
@@ -1551,12 +1816,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 +1846,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 +1855,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 +1868,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 +1877,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 +1905,7 @@ function StatusBarItem({
   grow = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "span",
     {
       ...props,
@@ -1656,7 +1921,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 +1937,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 +1954,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 +1984,7 @@ function WindowTitleButton({
   variant = icon === "close" ? "close" : "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "button",
     {
       ...props,
@@ -1741,9 +2006,10 @@ 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,
+  icon,
   onDragStart,
   titleButtons,
   title
@@ -1759,8 +2025,9 @@ 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", { "aria-hidden": true, className: "nu-window__title-icon", children: icon }),
+        /* @__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 +2084,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 +2097,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 +2108,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) {
@@ -1859,16 +2126,23 @@ function getWindowGeometry(node) {
     width: rect.width
   };
 }
+function getValidAspectRatio(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : void 0;
+}
 function WindowInner({
   active = true,
+  aspectRatio,
   bodyClassName,
   border = "single",
   children,
   className,
   closeable = true,
   draggable,
+  icon,
   maximizable,
   maximized = false,
+  minHeight,
+  minWidth,
   minimizable,
   minimized = false,
   mode = "dialog",
@@ -1889,18 +2163,19 @@ 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 resolvedAspectRatio = getValidAspectRatio(aspectRatio);
+  const isMaximizable = resolvedAspectRatio === void 0 && (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 +2183,7 @@ function WindowInner({
     }),
     [windowManager?.activateWindow, windowManager?.openDialog, windowManager?.windows]
   );
-  const resolvedMainMenu = useMemo5(
+  const resolvedMainMenu = useMemo6(
     () => resolveMdiMainMenuItems(menuState.mainMenu, mdiBridge),
     [menuState.mainMenu, mdiBridge]
   );
@@ -2047,22 +2322,16 @@ function WindowInner({
     } = getWindowGeometry(windowNode);
     const layerBounds = getWindowLayerBounds(windowNode);
     const computedStyle = window.getComputedStyle(windowNode);
-    const minWidth = Math.max(
-      Number.parseFloat(computedStyle.minWidth || "0") || 0,
-      240
-    );
-    const minHeight = Math.max(
-      Number.parseFloat(computedStyle.minHeight || "0") || 0,
-      120
-    );
-    const maxWidth = Math.max(
-      minWidth,
-      (layerBounds?.width ?? window.innerWidth) - left
-    );
-    const maxHeight = Math.max(
-      minHeight,
-      (layerBounds?.height ?? window.innerHeight) - top
-    );
+    const minWidth2 = Number.parseFloat(computedStyle.minWidth || "0") || 0;
+    const minHeight2 = Number.parseFloat(computedStyle.minHeight || "0") || 0;
+    const availableWidth = (layerBounds?.width ?? window.innerWidth) - left;
+    const availableHeight = (layerBounds?.height ?? window.innerHeight) - top;
+    const ratioMinWidth = resolvedAspectRatio ? Math.max(minWidth2, minHeight2 * resolvedAspectRatio) : minWidth2;
+    const maxWidth = resolvedAspectRatio ? Math.max(
+      ratioMinWidth,
+      Math.min(availableWidth, availableHeight * resolvedAspectRatio)
+    ) : Math.max(minWidth2, availableWidth);
+    const maxHeight = resolvedAspectRatio ? maxWidth / resolvedAspectRatio : Math.max(minHeight2, availableHeight);
     const hadTransform = computedStyle.transform !== "none";
     let didResize = false;
     if (hadTransform) {
@@ -2087,14 +2356,16 @@ function WindowInner({
       resizeFrameRef.current = window.requestAnimationFrame(flushResize);
     }
     function handlePointerMove(moveEvent) {
-      const nextWidth = Math.min(
+      const widthDelta = moveEvent.clientX - startClientX;
+      const heightDelta = moveEvent.clientY - startClientY;
+      const nextWidth = resolvedAspectRatio ? Math.min(
         maxWidth,
-        Math.max(minWidth, startWidth + moveEvent.clientX - startClientX)
-      );
-      const nextHeight = Math.min(
-        maxHeight,
-        Math.max(minHeight, startHeight + moveEvent.clientY - startClientY)
-      );
+        Math.max(
+          ratioMinWidth,
+          startWidth + (Math.abs(widthDelta) >= Math.abs(heightDelta * resolvedAspectRatio) ? widthDelta : heightDelta * resolvedAspectRatio)
+        )
+      ) : Math.min(maxWidth, Math.max(minWidth2, startWidth + widthDelta));
+      const nextHeight = resolvedAspectRatio ? nextWidth / resolvedAspectRatio : Math.min(maxHeight, Math.max(minHeight2, startHeight + heightDelta));
       didResize = true;
       scheduleResize({
         height: nextHeight,
@@ -2134,16 +2405,20 @@ function WindowInner({
       "data-mode": mode,
       onPointerDownCapture: handleRootPointerDownCapture,
       ref: windowRef,
-      style,
+      style: {
+        ...style,
+        minHeight: minHeight ?? style?.minHeight ?? 120,
+        minWidth: minWidth ?? style?.minWidth ?? 240
+      },
       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,17 +2426,18 @@ function WindowInner({
           }
         ),
         /* @__PURE__ */ jsxs12(WindowMenuContext.Provider, { value: menuState, children: [
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             WindowTitleBar,
             {
               draggable: isDraggable,
+              icon,
               onDragStart: handleTitlePointerDown,
               title,
               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 +2448,7 @@ function WindowInner({
               children
             }
           ),
-          mode === "window" && (statusBar || isResizable) ? /* @__PURE__ */ jsx20(
+          mode === "window" && (statusBar || isResizable) ? /* @__PURE__ */ jsx21(
             WindowStatusBar,
             {
               onResizeStart: handleResizePointerDown,
@@ -2189,9 +2465,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 +2483,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 +2557,7 @@ function AppBarItem(props) {
 }
 
 // src/windowing/WindowBar.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function buildWindowBarGroups(items) {
   const groups = [];
   const groupsByDomain = /* @__PURE__ */ new Map();
@@ -2290,6 +2566,7 @@ function buildWindowBarGroups(items) {
       groups.push({
         active: Boolean(item.active),
         id: item.id,
+        icon: item.icon,
         items: [item],
         label: item.title
       });
@@ -2301,6 +2578,7 @@ function buildWindowBarGroups(items) {
         active: Boolean(item.active),
         domain: item.domain,
         id: item.id,
+        icon: item.icon,
         items: [item],
         label: item.title
       };
@@ -2310,12 +2588,18 @@ function buildWindowBarGroups(items) {
     }
     existingGroup.items.push(item);
     existingGroup.active = existingGroup.active || Boolean(item.active);
+    if (item.active) {
+      existingGroup.icon = item.icon;
+    }
     existingGroup.label = `${item.domain} (${existingGroup.items.length})`;
   });
   return groups;
 }
+function getGroupIcon(group) {
+  return group.items.find((item) => item.active)?.icon ?? group.icon;
+}
 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 +2617,7 @@ function WindowBar({ items, onActivateWindow }) {
     const dialogDefinition = {
       appModal: true,
       border: "double",
-      content: ({ close }) => /* @__PURE__ */ jsx22(
+      content: ({ close }) => /* @__PURE__ */ jsx23(
         MdiWindowPickerDialog,
         {
           activeWindowId: activeGroupWindowId,
@@ -2354,17 +2638,23 @@ 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(
-    AppBarItem,
-    {
-      active: group.active,
-      className: "nu-window-bar__item",
-      interactive: true,
-      onClick: () => activateGroup(group),
-      children: group.label
-    },
-    group.id
-  )) });
+  return /* @__PURE__ */ jsx23("div", { className: "nu-window-bar", role: "group", "aria-label": "Open windows", children: groups.map((group) => {
+    const icon = getGroupIcon(group);
+    return /* @__PURE__ */ jsxs13(
+      AppBarItem,
+      {
+        active: group.active,
+        className: "nu-window-bar__item",
+        interactive: true,
+        onClick: () => activateGroup(group),
+        children: [
+          icon ? /* @__PURE__ */ jsx23("span", { "aria-hidden": true, className: "nu-window-bar__icon", children: icon }) : null,
+          group.label
+        ]
+      },
+      group.id
+    );
+  }) });
 }
 
 // src/windowing/dialogHelpers.tsx
@@ -2372,12 +2662,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 jsxs14 } from "react/jsx-runtime";
 function TextField({
   className,
   debounceMs = 0,
@@ -2398,12 +2688,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;
     }
@@ -2428,14 +2718,14 @@ function TextField({
     }
     onChange?.(event);
   }
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "label",
     {
       className: cx("nu-text-field", slotClassNames?.root, className),
       htmlFor: fieldId,
       style: slotStyles?.root,
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "span",
           {
             className: cx("nu-text-field__label", slotClassNames?.label),
@@ -2443,13 +2733,13 @@ function TextField({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14(
           "span",
           {
             className: cx("nu-text-field__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -2458,7 +2748,7 @@ function TextField({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 "span",
                 {
                   className: cx(
@@ -2466,7 +2756,7 @@ function TextField({
                     slotClassNames?.inputShell
                   ),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ jsx23(
+                  children: /* @__PURE__ */ jsx24(
                     "input",
                     {
                       ...props,
@@ -2485,7 +2775,7 @@ function TextField({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -2497,7 +2787,7 @@ function TextField({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx23(
+        hint ? /* @__PURE__ */ jsx24(
           "span",
           {
             className: cx("nu-text-field__hint", slotClassNames?.hint),
@@ -2512,7 +2802,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 +2811,7 @@ function NuView({
   scroll = "auto",
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       ...props,
@@ -2535,7 +2825,7 @@ function NuView({
 }
 
 // src/windowing/dialogHelpers.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 function getPresetButtons(preset) {
   switch (preset) {
     case "ok-cancel":
@@ -2638,8 +2928,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__ */ jsxs15(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsx26(
       "div",
       {
         style: tone ? {
@@ -2648,8 +2938,8 @@ function MessageBoxDialogContent({
         children: message
       }
     ),
-    /* @__PURE__ */ jsxs14(Stack, { direction: "row", gap: "sm", justify: "center", children: [
-      ok ? /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsxs15(Stack, { direction: "row", gap: "sm", justify: "center", children: [
+      ok ? /* @__PURE__ */ jsx26(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2658,7 +2948,7 @@ function MessageBoxDialogContent({
           children: okLabel
         }
       ) : null,
-      yes ? /* @__PURE__ */ jsx25(
+      yes ? /* @__PURE__ */ jsx26(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2667,7 +2957,7 @@ function MessageBoxDialogContent({
           children: yesLabel
         }
       ) : null,
-      no ? /* @__PURE__ */ jsx25(
+      no ? /* @__PURE__ */ jsx26(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2676,7 +2966,7 @@ function MessageBoxDialogContent({
           children: noLabel
         }
       ) : null,
-      cancel ? /* @__PURE__ */ jsx25(
+      cancel ? /* @__PURE__ */ jsx26(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2698,8 +2988,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__ */ jsxs15(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsx26(
       TextField,
       {
         autoFocus: true,
@@ -2710,8 +3000,8 @@ function InputBoxDialogContent({
         placeholder
       }
     ),
-    /* @__PURE__ */ jsxs14(Stack, { direction: "row", gap: "sm", justify: "center", children: [
-      /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsxs15(Stack, { direction: "row", gap: "sm", justify: "center", children: [
+      /* @__PURE__ */ jsx26(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2720,7 +3010,7 @@ function InputBoxDialogContent({
           children: okLabel
         }
       ),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(
         Button,
         {
           className: "nu-dialog-helper__button",
@@ -2734,7 +3024,7 @@ function InputBoxDialogContent({
 }
 
 // src/windowing/NuWindowProvider.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 function getDefaultWindowStyle(mode, index) {
   const offset = index * 18;
   return {
@@ -2809,6 +3099,7 @@ function buildWindowRecord(definition, currentWindows, windowBoundsById, creatio
     ownerCenteredStyle,
     index
   );
+  const hasAspectRatio = typeof definition.aspectRatio === "number" && Number.isFinite(definition.aspectRatio) && definition.aspectRatio > 0;
   return {
     ...definition,
     appModal,
@@ -2817,18 +3108,18 @@ function buildWindowRecord(definition, currentWindows, windowBoundsById, creatio
     creationOrder,
     draggable: mode === "window",
     id,
-    maximizable: definition.maximizable ?? mode === "window",
+    maximizable: !hasAspectRatio && (definition.maximizable ?? mode === "window"),
     modalOwnerId,
     minimizable: definition.minimizable ?? mode === "window",
     mode,
     resizable: definition.resizable ?? mode === "window",
-    restoreStyle: savedWindowState.restoreStyle,
+    restoreStyle: hasAspectRatio ? void 0 : savedWindowState.restoreStyle,
     title: resolveManagedWindowTitle(currentWindows, titleBase),
     titleBase,
     style: {
       ...savedWindowState.style
     },
-    maximized: savedWindowState.maximized,
+    maximized: hasAspectRatio ? false : savedWindowState.maximized,
     minimized: savedWindowState.minimized
   };
 }
@@ -2878,12 +3169,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}`;
@@ -3043,7 +3334,7 @@ function NuWindowProvider({
   const toggleWindowMaximized = useCallback3((id) => {
     setWindows(
       (currentWindows) => currentWindows.map((windowEntry) => {
-        if (windowEntry.id !== id) {
+        if (windowEntry.id !== id || !windowEntry.maximizable) {
           return windowEntry;
         }
         if (windowEntry.maximized) {
@@ -3128,7 +3419,7 @@ function NuWindowProvider({
       openDialog({
         appModal: options.appModal ?? true,
         closeable: true,
-        content: ({ close }) => /* @__PURE__ */ jsx26(
+        content: ({ close }) => /* @__PURE__ */ jsx27(
           MessageBoxDialogContent,
           {
             cancel: buttons.cancel,
@@ -3171,7 +3462,7 @@ function NuWindowProvider({
       openDialog({
         appModal: options.appModal ?? true,
         closeable: true,
-        content: ({ close }) => /* @__PURE__ */ jsx26(
+        content: ({ close }) => /* @__PURE__ */ jsx27(
           InputBoxDialogContent,
           {
             cancelLabel: options.cancelLabel ?? "&Cancel",
@@ -3209,21 +3500,32 @@ function NuWindowProvider({
   const topmostAppModalIndex = findTopmostAppModalIndex(visibleWindows);
   const topmostAppModalId = topmostAppModalIndex >= 0 ? visibleWindows[topmostAppModalIndex]?.id : void 0;
   const activeWindowId = topmostAppModalIndex >= 0 ? visibleWindows[topmostAppModalIndex]?.id : visibleWindows[visibleWindows.length - 1]?.id;
+  const activeWindow = activeWindowId ? windows.find((windowEntry) => windowEntry.id === activeWindowId) : void 0;
+  const activeActivationGroup = topmostAppModalIndex >= 0 ? void 0 : activeWindow?.activationGroup;
   const hasAppModal = topmostAppModalIndex >= 0;
-  const windowsInfo = useMemo6(
+  const isWindowActive = useCallback3(
+    (windowEntry) => windowEntry.id === activeWindowId || activeActivationGroup !== void 0 && windowEntry.activationGroup === activeActivationGroup,
+    [activeActivationGroup, activeWindowId]
+  );
+  const windowsInfo = useMemo7(
     () => [...windows].sort(
       (leftWindow, rightWindow) => leftWindow.creationOrder - rightWindow.creationOrder
     ).map((windowEntry) => ({
-      active: windowEntry.id === activeWindowId,
+      active: isWindowActive(windowEntry),
+      activationGroup: windowEntry.activationGroup,
+      aspectRatio: windowEntry.aspectRatio,
       bodyClassName: windowEntry.bodyClassName,
       appModal: windowEntry.appModal,
       border: windowEntry.border,
       className: windowEntry.className,
       closeable: windowEntry.closeable,
       domain: windowEntry.domain,
+      icon: windowEntry.icon,
       id: windowEntry.id,
       maximizable: windowEntry.maximizable,
       maximized: windowEntry.maximized,
+      minHeight: windowEntry.minHeight,
+      minWidth: windowEntry.minWidth,
       modal: windowEntry.modalOwnerId ?? false,
       minimizable: windowEntry.minimizable,
       minimized: windowEntry.minimized,
@@ -3234,9 +3536,9 @@ function NuWindowProvider({
       title: windowEntry.title,
       titleButtons: windowEntry.titleButtons
     })),
-    [activeWindowId, windows]
+    [isWindowActive, windows]
   );
-  const mdiBridge = useMemo6(
+  const mdiBridge = useMemo7(
     () => ({
       activateWindow,
       openDialog,
@@ -3244,7 +3546,7 @@ function NuWindowProvider({
     }),
     [activateWindow, openDialog, windowsInfo]
   );
-  const contextValue = useMemo6(
+  const contextValue = useMemo7(
     () => ({
       activateWindow,
       bringToFront,
@@ -3274,13 +3576,13 @@ function NuWindowProvider({
       windowsInfo
     ]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (!appHostMenuContext) {
       return;
     }
     appHostMenuContext.setWindowBridge(mdiBridge);
   }, [appHostMenuContext, mdiBridge]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!appHostMenuContext) {
       return;
     }
@@ -3288,13 +3590,13 @@ 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__ */ jsxs16("div", { className: ["nu-window-host", className].filter(Boolean).join(" "), children: [
     children,
-    /* @__PURE__ */ jsx26("div", { className: "nu-window-layer", children: renderWindows.map((windowEntry) => {
-      const isActiveWindow = windowEntry.id === activeWindowId;
+    /* @__PURE__ */ jsx27("div", { className: "nu-window-layer", children: renderWindows.map((windowEntry) => {
+      const isActiveWindow = isWindowActive(windowEntry);
       const stackIndex = stackIndexById.get(windowEntry.id);
       const isTopmostAppModal = windowEntry.id === topmostAppModalId;
       const ownerBounds = windowEntry.modalOwnerId ? windowBoundsById[windowEntry.modalOwnerId] : void 0;
@@ -3322,30 +3624,34 @@ function NuWindowProvider({
         update: handleUpdate
       };
       const content = typeof windowEntry.content === "function" ? windowEntry.content(controls) : windowEntry.content;
-      return /* @__PURE__ */ jsxs15(Fragment3, { children: [
-        isTopmostAppModal ? /* @__PURE__ */ jsx26(
+      return /* @__PURE__ */ jsxs16(Fragment3, { children: [
+        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,
+            aspectRatio: windowEntry.aspectRatio,
             bodyClassName: windowEntry.bodyClassName,
             border: windowEntry.border,
             className: windowEntry.className,
             closeable: windowEntry.closeable,
             draggable: windowEntry.draggable,
+            icon: windowEntry.icon,
             maximizable: windowEntry.maximizable,
+            minHeight: windowEntry.minHeight,
+            minWidth: windowEntry.minWidth,
             minimizable: windowEntry.minimizable,
             maximized: windowEntry.maximized,
             minimized: windowEntry.minimized,
@@ -3369,13 +3675,14 @@ function NuWindowProvider({
         )
       ] }, windowEntry.id);
     }) }),
-    renderAppBar ? /* @__PURE__ */ jsx26(AppBarHost, { children: /* @__PURE__ */ jsx26(
+    renderAppBar ? /* @__PURE__ */ jsx27(AppBarHost, { children: /* @__PURE__ */ jsx27(
       WindowBar,
       {
         items: windowsInfo.map((windowEntry) => ({
           active: windowEntry.active,
           domain: windowEntry.domain,
           id: windowEntry.id,
+          icon: windowEntry.icon,
           minimized: windowEntry.minimized,
           title: windowEntry.title
         })),
@@ -3386,11 +3693,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 jsxs17 } 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
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx28("div", { className: "nu-desktop__workspace", children }),
+    appBar ? /* @__PURE__ */ jsx28("div", { className: "nu-desktop__app-bar", children: appBar }) : null
   ] });
 }
 function NuDesktop({
@@ -3401,11 +3708,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 +3732,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.");
   }
@@ -3433,21 +3740,21 @@ function NuDesktopShell({
     appHostContext.mainMenu,
     appHostContext.windowBridge
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ...props,
       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 +3763,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 +3784,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 +3796,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 +3808,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 +3826,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 +3840,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 +3850,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 jsxs18 } from "react/jsx-runtime";
 function CheckBox({
   checked,
   className,
@@ -3570,19 +3877,19 @@ function CheckBox({
     }
     onCheckedChange?.(event.target.checked, event);
   }
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "label",
     {
       className: cx("nu-check-box", slotClassNames?.root, className),
       style: slotStyles?.root,
       children: [
-        /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsxs18(
           "span",
           {
             className: cx("nu-check-box__main", slotClassNames?.main),
             style: slotStyles?.main,
             children: [
-              /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx30(
                 "input",
                 {
                   ...props,
@@ -3596,19 +3903,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 +3927,7 @@ function CheckBox({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx30(
                 "span",
                 {
                   className: cx("nu-check-box__label", slotClassNames?.label),
@@ -3631,7 +3938,7 @@ function CheckBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx29(
+        hint ? /* @__PURE__ */ jsx30(
           "span",
           {
             className: cx("nu-check-box__hint", slotClassNames?.hint),
@@ -3647,29 +3954,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 +3989,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 +4112,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 jsxs19 } from "react/jsx-runtime";
 function flattenDropdownOptions(data) {
   const options = [];
   data.forEach((group) => {
@@ -3854,13 +4161,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 +4175,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 +4212,7 @@ function Dropdown({
     open,
     popupRef
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) {
       return;
     }
@@ -3971,7 +4278,7 @@ function Dropdown({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       ...props,
@@ -3979,7 +4286,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 +4295,7 @@ function Dropdown({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "button",
           {
             "aria-describedby": hintId,
@@ -4006,20 +4313,20 @@ function Dropdown({
             },
             style: slotStyles?.trigger,
             type: "button",
-            children: /* @__PURE__ */ jsxs18(
+            children: /* @__PURE__ */ jsxs19(
               "span",
               {
                 className: cx("nu-dropdown__slot", slotClassNames?.slot),
                 style: slotStyles?.slot,
                 children: [
-                  /* @__PURE__ */ jsxs18(
+                  /* @__PURE__ */ jsxs19(
                     "span",
                     {
                       className: cx("nu-dropdown__field", slotClassNames?.field),
                       ref: fieldRef,
                       style: slotStyles?.field,
                       children: [
-                        /* @__PURE__ */ jsx31(
+                        /* @__PURE__ */ jsx32(
                           "span",
                           {
                             "aria-hidden": "true",
@@ -4028,7 +4335,7 @@ function Dropdown({
                             children: "["
                           }
                         ),
-                        /* @__PURE__ */ jsx31(
+                        /* @__PURE__ */ jsx32(
                           "span",
                           {
                             className: cx(
@@ -4036,7 +4343,7 @@ function Dropdown({
                               slotClassNames?.valueShell
                             ),
                             style: slotStyles?.valueShell,
-                            children: /* @__PURE__ */ jsx31(
+                            children: /* @__PURE__ */ jsx32(
                               "span",
                               {
                                 className: cx("nu-dropdown__value", slotClassNames?.value),
@@ -4046,7 +4353,7 @@ function Dropdown({
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsx31(
+                        /* @__PURE__ */ jsx32(
                           "span",
                           {
                             "aria-hidden": "true",
@@ -4058,7 +4365,7 @@ function Dropdown({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx31(
+                  /* @__PURE__ */ jsx32(
                     ControlOpener,
                     {
                       ariaHidden: true,
@@ -4069,7 +4376,7 @@ function Dropdown({
                         slotClassNames?.arrowShell
                       ),
                       style: slotStyles?.arrowShell,
-                      children: /* @__PURE__ */ jsx31(
+                      children: /* @__PURE__ */ jsx32(
                         NuGlyph,
                         {
                           className: cx(
@@ -4088,7 +4395,7 @@ function Dropdown({
             )
           }
         ),
-        hint ? /* @__PURE__ */ jsx31(
+        hint ? /* @__PURE__ */ jsx32(
           "span",
           {
             className: cx("nu-dropdown__hint", slotClassNames?.hint),
@@ -4098,7 +4405,7 @@ function Dropdown({
           }
         ) : null,
         open && typeof document !== "undefined" ? createPortal(
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx32(
             "div",
             {
               className: cx("nu-dropdown__popup", slotClassNames?.popup),
@@ -4107,7 +4414,7 @@ function Dropdown({
                 { left: 0, top: 0, visibility: "hidden", width: 0 },
                 slotStyles?.popup
               ),
-              children: /* @__PURE__ */ jsx31(
+              children: /* @__PURE__ */ jsx32(
                 "div",
                 {
                   className: cx(
@@ -4116,7 +4423,7 @@ function Dropdown({
                   ),
                   ref: popupListRef,
                   style: slotStyles?.popupShell,
-                  children: /* @__PURE__ */ jsx31(
+                  children: /* @__PURE__ */ jsx32(
                     ListBox,
                     {
                       className: cx(
@@ -4149,7 +4456,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 jsxs20 } from "react/jsx-runtime";
 function Frame({
   children,
   className,
@@ -4170,7 +4477,7 @@ function Frame({
 }) {
   const resolvedTitleContent = titleContent ?? (title ? renderMnemonicText(title) : null);
   const hasTitleShell = Boolean(titleStart || resolvedTitleContent || titleEnd);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "section",
     {
       ...props,
@@ -4187,13 +4494,13 @@ function Frame({
         ...slotStyles?.root
       },
       children: [
-        hasTitleShell ? /* @__PURE__ */ jsxs19(
+        hasTitleShell ? /* @__PURE__ */ jsxs20(
           "span",
           {
             className: cx("nu-frame__title", slotClassNames?.title),
             style: mergeSlotStyle(titleStyle, slotStyles?.title),
             children: [
-              titleStart ? /* @__PURE__ */ jsx32(
+              titleStart ? /* @__PURE__ */ jsx33(
                 "span",
                 {
                   className: cx(
@@ -4204,7 +4511,7 @@ function Frame({
                   children: titleStart
                 }
               ) : null,
-              resolvedTitleContent ? /* @__PURE__ */ jsx32(
+              resolvedTitleContent ? /* @__PURE__ */ jsx33(
                 "span",
                 {
                   className: cx(
@@ -4215,7 +4522,7 @@ function Frame({
                   children: resolvedTitleContent
                 }
               ) : null,
-              titleEnd ? /* @__PURE__ */ jsx32(
+              titleEnd ? /* @__PURE__ */ jsx33(
                 "span",
                 {
                   className: cx("nu-frame__title-end", slotClassNames?.titleEnd),
@@ -4226,7 +4533,7 @@ function Frame({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           "div",
           {
             className: cx("nu-frame__body", slotClassNames?.body),
@@ -4240,7 +4547,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 +4556,7 @@ function Info({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       ...props,
@@ -4273,7 +4580,7 @@ function InfoAccent({
   upper = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "span",
     {
       ...props,
@@ -4290,48 +4597,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 +4653,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 +4671,7 @@ function PopupMenu({
     },
     [isControlled, onOpenChange]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (!resolvedOpen) {
       return;
     }
@@ -4465,7 +4746,7 @@ function PopupMenu({
     return null;
   }
   return createPortal2(
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35(
       "div",
       {
         ...props,
@@ -4481,7 +4762,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 +4824,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 +4841,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 jsxs21 } 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 +4890,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 +4930,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 +4972,6 @@ function NuIconGridItem({
       event.currentTarget.releasePointerCapture(event.pointerId);
     }
     dragStartRef.current = void 0;
-    removeDragPreview();
     if (!isDraggingRef.current) {
       return;
     }
@@ -4738,6 +4979,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(
@@ -4808,8 +5055,8 @@ function NuIconGridItem({
     manager.selectIcon(icon.id);
     contextMenu.openAtElement(event.currentTarget);
   }
-  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
-    /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
+    /* @__PURE__ */ jsxs21(
       "button",
       {
         "aria-haspopup": contextMenuItems.length > 0 ? "menu" : void 0,
@@ -4828,12 +5075,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 +5093,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;
@@ -4911,7 +5170,7 @@ function NuIconGrid({
     manager.selectIcon(null);
     contextMenu.openAtPoint(event.clientX, event.clientY, event.currentTarget);
   }
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       ...props,
@@ -4930,16 +5189,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 +5216,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 +5285,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 +5345,7 @@ function NuIconProvider({
   const setGridSize = useCallback5((size) => {
     gridSizeRef.current = size;
   }, []);
-  const contextValue = useMemo9(
+  const contextValue = useMemo10(
     () => ({
       addIcon,
       arrangeIcons,
@@ -5108,19 +5368,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 jsxs22 } from "react/jsx-runtime";
 function flattenComboBoxOptions(data) {
   const options = [];
   data.forEach((group) => {
@@ -5161,16 +5421,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 +5439,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 +5456,7 @@ function ComboBox({
       )
     })).filter((group) => group.items.length > 0);
   }, [data, normalizedFilter]);
-  const filteredOptions = useMemo10(
+  const filteredOptions = useMemo11(
     () => flattenComboBoxOptions(filteredData).filter(
       (option) => !option.item.disabled
     ),
@@ -5280,7 +5540,7 @@ function ComboBox({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       ...props,
@@ -5288,7 +5548,7 @@ function ComboBox({
       ref: rootRef,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           "label",
           {
             className: cx("nu-combo-box__label", slotClassNames?.label),
@@ -5298,20 +5558,20 @@ function ComboBox({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsxs22(
           "span",
           {
             className: cx("nu-combo-box__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsxs21(
+              /* @__PURE__ */ jsxs22(
                 "span",
                 {
                   className: cx("nu-combo-box__field", slotClassNames?.field),
                   ref: fieldRef,
                   style: slotStyles?.field,
                   children: [
-                    /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx38(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -5320,7 +5580,7 @@ function ComboBox({
                         children: "["
                       }
                     ),
-                    /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx38(
                       "span",
                       {
                         className: cx(
@@ -5328,7 +5588,7 @@ function ComboBox({
                           slotClassNames?.inputShell
                         ),
                         style: slotStyles?.inputShell,
-                        children: /* @__PURE__ */ jsx37(
+                        children: /* @__PURE__ */ jsx38(
                           "input",
                           {
                             "aria-autocomplete": "list",
@@ -5355,7 +5615,7 @@ function ComboBox({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx38(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -5367,7 +5627,7 @@ function ComboBox({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(
                 ControlOpener,
                 {
                   "aria-label": open ? "Collapse list" : "Expand list",
@@ -5385,7 +5645,7 @@ function ComboBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx37(
+        hint ? /* @__PURE__ */ jsx38(
           "span",
           {
             className: cx("nu-combo-box__hint", slotClassNames?.hint),
@@ -5395,7 +5655,7 @@ function ComboBox({
           }
         ) : null,
         open && popupRoot ? createPortal3(
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             "div",
             {
               className: cx("nu-combo-box__popup", slotClassNames?.popup),
@@ -5405,12 +5665,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 +5703,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 jsxs23 } from "react/jsx-runtime";
 var COMMAND_BUTTON_GLYPH_NAMES = /* @__PURE__ */ new Set([
   "check-fill",
   "check-mark",
@@ -5484,7 +5744,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) {
@@ -5492,8 +5752,8 @@ function CommandButton({
     }
     popupMenu.openFromClick(event);
   }
-  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
-    /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
+    /* @__PURE__ */ jsxs23(
       "button",
       {
         ...props,
@@ -5509,7 +5769,7 @@ function CommandButton({
         type,
         onClick: handleClick,
         children: [
-          resolvedIcon ? /* @__PURE__ */ jsx38(
+          resolvedIcon ? /* @__PURE__ */ jsx39(
             "span",
             {
               className: cx(
@@ -5521,7 +5781,7 @@ function CommandButton({
               children: resolvedIcon
             }
           ) : null,
-          children ? /* @__PURE__ */ jsx38(
+          children ? /* @__PURE__ */ jsx39(
             "span",
             {
               className: cx(
@@ -5533,7 +5793,7 @@ function CommandButton({
               children: renderMnemonicNode(children)
             }
           ) : null,
-          showCaret ? /* @__PURE__ */ jsx38(
+          showCaret ? /* @__PURE__ */ jsx39(
             "span",
             {
               className: cx(
@@ -5542,13 +5802,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 +5823,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 jsxs24 } from "react/jsx-runtime";
 var DEFAULT_INTERVAL_MS = 3e3;
 var DEFAULT_DURATION_MS = 2500;
 var DEFAULT_TOP_LEVEL_RATIO = 1 / 3;
@@ -5590,12 +5850,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 +5958,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__ */ jsxs24(
     "filter",
     {
       "color-interpolation-filters": "sRGB",
@@ -5708,7 +5968,7 @@ function NuCrtGlitch({
       x: "-15%",
       y: "-5%",
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           "feTurbulence",
           {
             baseFrequency: "0.001 0.045",
@@ -5719,7 +5979,7 @@ function NuCrtGlitch({
             type: "turbulence"
           }
         ),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           "feDisplacementMap",
           {
             in: "SourceGraphic",
@@ -5731,8 +5991,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 +6001,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 +6010,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 +6020,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 +6033,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 +6073,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 +6093,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 +6113,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 jsxs25 } from "react/jsx-runtime";
 function ListViewRowInner({
   columns,
   isActive,
@@ -5884,7 +6144,7 @@ function ListViewRowInner({
   function handleToggleCheck() {
     onToggleCheck(rowId);
   }
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       "aria-disabled": row.disabled || void 0,
@@ -5905,7 +6165,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 +6174,7 @@ function ListViewRowInner({
             uncheckedShape
           }
         ) }) : null,
-        columns.map((column) => /* @__PURE__ */ jsx41(
+        columns.map((column) => /* @__PURE__ */ jsx42(
           "span",
           {
             className: [
@@ -5934,7 +6194,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 jsxs26 } from "react/jsx-runtime";
 function ListViewInner({
   activeRowId: activeRowIdProp,
   checkedIds,
@@ -5952,9 +6212,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 +6224,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)"
@@ -6102,7 +6362,7 @@ function ListViewInner({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       ...props,
@@ -6113,7 +6373,7 @@ function ListViewInner({
       role: "grid",
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsxs26(
           "div",
           {
             className: "nu-list-view__header",
@@ -6122,8 +6382,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 +6399,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 +6416,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 +6427,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 +6594,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 jsxs27 } from "react/jsx-runtime";
 function MaskedField({
   "aria-invalid": ariaInvalid,
   className,
@@ -6357,7 +6617,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 +6627,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]
   );
@@ -6406,7 +6666,7 @@ function MaskedField({
     }
     onChange?.(event);
   }
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "label",
     {
       className: cx(
@@ -6418,7 +6678,7 @@ function MaskedField({
       htmlFor: fieldId,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           "span",
           {
             className: cx("nu-masked-field__label", slotClassNames?.label),
@@ -6426,13 +6686,13 @@ function MaskedField({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsxs27(
           "span",
           {
             className: cx("nu-masked-field__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx44(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -6441,7 +6701,7 @@ function MaskedField({
                   children: "["
                 }
               ),
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx44(
                 "span",
                 {
                   className: cx(
@@ -6449,7 +6709,7 @@ function MaskedField({
                     slotClassNames?.inputShell
                   ),
                   style: slotStyles?.inputShell,
-                  children: /* @__PURE__ */ jsx43(
+                  children: /* @__PURE__ */ jsx44(
                     "input",
                     {
                       ...props,
@@ -6467,7 +6727,7 @@ function MaskedField({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx44(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -6479,7 +6739,7 @@ function MaskedField({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx43(
+        hint ? /* @__PURE__ */ jsx44(
           "span",
           {
             className: cx("nu-masked-field__hint", slotClassNames?.hint),
@@ -6497,7 +6757,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 +6787,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 +6800,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 +6816,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 jsxs28 } from "react/jsx-runtime";
 function PageControl({
   activePageId: activePageIdProp,
   className,
@@ -6574,12 +6834,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
     );
@@ -6645,7 +6905,7 @@ function PageControl({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       ...props,
@@ -6656,7 +6916,7 @@ function PageControl({
         slotStyles?.root
       ),
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           "div",
           {
             className: cx("nu-page-control__tabs", slotClassNames?.tabs),
@@ -6667,7 +6927,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 +6951,7 @@ function PageControl({
             })
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           "div",
           {
             "aria-labelledby": resolvedActivePage ? `${generatedId}-tab-${resolvedActivePage.id}` : void 0,
@@ -6708,7 +6968,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 jsxs29 } from "react/jsx-runtime";
 function Panel({
   children,
   className,
@@ -6719,14 +6979,14 @@ function Panel({
   title,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "section",
     {
       ...props,
       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 +6994,7 @@ function Panel({
             children: renderMnemonicText(title)
           }
         ) : null,
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(
           "div",
           {
             className: cx(
@@ -6746,7 +7006,7 @@ function Panel({
             children
           }
         ),
-        footer ? /* @__PURE__ */ jsx46(
+        footer ? /* @__PURE__ */ jsx47(
           "footer",
           {
             className: cx("nu-panel__footer", slotClassNames?.footer),
@@ -6762,11 +7022,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 jsxs30 } from "react/jsx-runtime";
 function collectGroupIds(entries) {
   const groupIds = /* @__PURE__ */ new Set();
   function visit(nextEntries) {
@@ -6874,23 +7134,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 +7270,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,13 +7281,13 @@ 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);
-          return /* @__PURE__ */ jsxs29(
+          return /* @__PURE__ */ jsxs30(
             "div",
             {
               className: "nu-property-grid__row",
@@ -7036,7 +7296,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",
@@ -7056,32 +7316,32 @@ function PropertyGrid({
                       "--nu-property-grid-depth": row.depth
                     },
                     type: "button",
-                    children: /* @__PURE__ */ jsxs29("span", { className: "nu-property-grid__lead", children: [
-                      /* @__PURE__ */ jsx47("span", { className: "nu-property-grid__expander", children: /* @__PURE__ */ jsx47(
+                    children: /* @__PURE__ */ jsxs30("span", { className: "nu-property-grid__lead", children: [
+                      /* @__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
           );
         }
         const editorId = `${editorIdPrefix}-editor-${row.entry.id}`;
-        return /* @__PURE__ */ jsxs29(
+        return /* @__PURE__ */ jsxs30(
           "div",
           {
             className: "nu-property-grid__row",
             "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",
@@ -7101,21 +7361,21 @@ function PropertyGrid({
                     "--nu-property-grid-depth": row.depth
                   },
                   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) })
+                  children: /* @__PURE__ */ jsxs30("span", { className: "nu-property-grid__lead", children: [
+                    /* @__PURE__ */ jsx48("span", { className: "nu-property-grid__expander-placeholder" }),
+                    /* @__PURE__ */ jsx48("span", { className: "nu-property-grid__label-text", children: renderMnemonicText(row.entry.label) })
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsxs29(
+              /* @__PURE__ */ jsxs30(
                 "div",
                 {
                   className: "nu-property-grid__editor",
                   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 +7389,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 jsxs31 } from "react/jsx-runtime";
 function clamp3(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -7153,7 +7413,7 @@ function ProgressBar({
   const clampedValue = clamp3(value, min, safeMax);
   const percent = Math.round((clampedValue - min) / (safeMax - min) * 100);
   const renderedValue = valueRenderer ? valueRenderer(percent, clampedValue, min, safeMax) : `${percent}%`;
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       ...props,
@@ -7165,7 +7425,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),
@@ -7173,7 +7433,7 @@ function ProgressBar({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ jsxs30(
+        /* @__PURE__ */ jsxs31(
           "div",
           {
             className: cx("nu-progress-bar__track", slotClassNames?.track),
@@ -7184,7 +7444,7 @@ function ProgressBar({
               slotStyles?.track
             ),
             children: [
-              /* @__PURE__ */ jsx48(
+              /* @__PURE__ */ jsx49(
                 "div",
                 {
                   className: cx("nu-progress-bar__fill", slotClassNames?.fill),
@@ -7197,7 +7457,7 @@ function ProgressBar({
                   )
                 }
               ),
-              showValue ? /* @__PURE__ */ jsx48(
+              showValue ? /* @__PURE__ */ jsx49(
                 "span",
                 {
                   className: cx("nu-progress-bar__value", slotClassNames?.value),
@@ -7208,7 +7468,7 @@ function ProgressBar({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx48(
+        hint ? /* @__PURE__ */ jsx49(
           "span",
           {
             className: cx("nu-progress-bar__hint", slotClassNames?.hint),
@@ -7223,7 +7483,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 jsxs32 } from "react/jsx-runtime";
 function RadioButton({
   checked,
   className,
@@ -7247,9 +7507,9 @@ function RadioButton({
     }
     onCheckedChange?.(event.target.checked, event);
   }
-  return /* @__PURE__ */ jsxs31("label", { className: ["nu-radio-button", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs31("span", { className: "nu-radio-button__main", children: [
-      /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs32("label", { className: ["nu-radio-button", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs32("span", { className: "nu-radio-button__main", children: [
+      /* @__PURE__ */ jsx50(
         "input",
         {
           ...props,
@@ -7262,19 +7522,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__ */ jsxs32("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 jsxs33 } from "react/jsx-runtime";
 function RadioGroup({
   className,
   defaultValue,
@@ -7301,7 +7561,7 @@ function RadioGroup({
     }
     onValueChange?.(nextValue);
   }
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "fieldset",
     {
       ...props,
@@ -7309,7 +7569,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 +7577,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 +7601,7 @@ function RadioGroup({
             ))
           }
         ),
-        hint ? /* @__PURE__ */ jsx50(
+        hint ? /* @__PURE__ */ jsx51(
           "span",
           {
             className: cx("nu-radio-group__hint", slotClassNames?.hint),
@@ -7356,14 +7616,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 +7641,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 jsxs34 } from "react/jsx-runtime";
 function resolveSearchBoxPortalRoot() {
   return document.body;
 }
@@ -7414,11 +7674,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 +7691,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 +7705,7 @@ function SearchBox({
       value: getItemId(item, index)
     }));
   }, [getItemDetails, getItemDisabled, getItemId, getItemText, results]);
-  const listBoxData = useMemo15(
+  const listBoxData = useMemo16(
     () => [
       {
         category: null,
@@ -7536,15 +7796,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,
@@ -7581,7 +7841,7 @@ function SearchBox({
         break;
     }
   }
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       ...props,
@@ -7589,10 +7849,10 @@ function SearchBox({
       ref: rootRef,
       style,
       children: [
-        /* @__PURE__ */ jsx52("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("label", { className: "nu-search-box__label", htmlFor: fieldId, id: labelId, children: renderMnemonicText(label) }),
+        /* @__PURE__ */ jsxs34("span", { className: "nu-search-box__slot", ref: fieldRef, children: [
+          /* @__PURE__ */ 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 +7877,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 +7901,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 jsxs35 } from "react/jsx-runtime";
 function clampSpinValue(value, min, max) {
   let nextValue = value;
   if (min !== void 0) {
@@ -7749,22 +8009,22 @@ 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]
   );
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "label",
     {
       className: cx("nu-spin-box", slotClassNames?.root, className),
       htmlFor: fieldId,
       style: mergeSlotStyle(style, slotStyles?.root),
       children: [
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           "span",
           {
             className: cx("nu-spin-box__label", slotClassNames?.label),
@@ -7772,13 +8032,13 @@ function SpinBox({
             children: renderMnemonicText(label)
           }
         ),
-        /* @__PURE__ */ jsxs34(
+        /* @__PURE__ */ jsxs35(
           "span",
           {
             className: cx("nu-spin-box__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsx53(
+              /* @__PURE__ */ jsx54(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -7787,12 +8047,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 +8071,7 @@ function SpinBox({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx53(
+              /* @__PURE__ */ jsx54(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -7820,13 +8080,13 @@ function SpinBox({
                   children: "]"
                 }
               ),
-              /* @__PURE__ */ jsxs34(
+              /* @__PURE__ */ jsxs35(
                 "span",
                 {
                   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 +8097,7 @@ function SpinBox({
                         children: "-"
                       }
                     ),
-                    /* @__PURE__ */ jsx53(
+                    /* @__PURE__ */ jsx54(
                       "button",
                       {
                         className: cx("nu-spin-box__button", slotClassNames?.button),
@@ -7854,7 +8114,7 @@ function SpinBox({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx53(
+        hint ? /* @__PURE__ */ jsx54(
           "span",
           {
             className: cx("nu-spin-box__hint", slotClassNames?.hint),
@@ -7872,10 +8132,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 jsxs36 } from "react/jsx-runtime";
 function clamp4(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -7909,9 +8169,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,
@@ -8030,7 +8290,7 @@ function Splitter({
       commitValue(max);
     }
   }
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       ...props,
@@ -8042,8 +8302,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 +8316,7 @@ function Splitter({
             onPointerDown: handlePointerDown,
             role: "separator",
             tabIndex: 0,
-            children: /* @__PURE__ */ jsx54(
+            children: /* @__PURE__ */ jsx55(
               "span",
               {
                 "aria-hidden": "true",
@@ -8066,7 +8326,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 +8336,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 jsxs37 } from "react/jsx-runtime";
 function clamp5(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -8127,10 +8387,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);
     }
@@ -8216,7 +8476,7 @@ function TickBar({
     }
     onKeyDown?.(event);
   }
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       ...props,
@@ -8229,7 +8489,7 @@ function TickBar({
         slotStyles?.root
       ),
       children: [
-        label ? /* @__PURE__ */ jsx55(
+        label ? /* @__PURE__ */ jsx56(
           "span",
           {
             className: cx("nu-tick-bar__label", slotClassNames?.label),
@@ -8237,13 +8497,13 @@ function TickBar({
             children: renderMnemonicText(label)
           }
         ) : null,
-        /* @__PURE__ */ jsxs36(
+        /* @__PURE__ */ jsxs37(
           "div",
           {
             className: cx("nu-tick-bar__slot", slotClassNames?.slot),
             style: slotStyles?.slot,
             children: [
-              /* @__PURE__ */ jsxs36(
+              /* @__PURE__ */ jsxs37(
                 "div",
                 {
                   "aria-describedby": hintId,
@@ -8285,19 +8545,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 +8568,7 @@ function TickBar({
                         ))
                       }
                     ),
-                    /* @__PURE__ */ jsx55(
+                    /* @__PURE__ */ jsx56(
                       "div",
                       {
                         "aria-hidden": "true",
@@ -8326,7 +8586,7 @@ function TickBar({
                   ]
                 }
               ),
-              showValue ? /* @__PURE__ */ jsx55(
+              showValue ? /* @__PURE__ */ jsx56(
                 "span",
                 {
                   className: cx("nu-tick-bar__value", slotClassNames?.value),
@@ -8337,7 +8597,7 @@ function TickBar({
             ]
           }
         ),
-        hint ? /* @__PURE__ */ jsx55(
+        hint ? /* @__PURE__ */ jsx56(
           "span",
           {
             className: cx("nu-tick-bar__hint", slotClassNames?.hint),
@@ -8352,7 +8612,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 +8622,7 @@ function ToolBar({
   wrap = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
       ...props,
@@ -8381,7 +8641,7 @@ function ToolButton({
   slotStyles,
   ...props
 }) {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     CommandButton,
     {
       ...props,
@@ -8411,7 +8671,7 @@ function ToolDropButton({
   uncheckedShape,
   ...props
 }) {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     CommandButton,
     {
       ...props,
@@ -8437,7 +8697,7 @@ function ToolDropButton({
   );
 }
 function ToolSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
       ...props,
@@ -8459,8 +8719,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 +8819,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 jsxs38 } from "react/jsx-runtime";
 function areTreeViewGuideArraysEqual(previousArray, nextArray) {
   if (previousArray.length !== nextArray.length) {
     return false;
@@ -8633,8 +8893,8 @@ function TreeViewItemInner({
     handleActivate();
     onToggleItemCheck?.(item, !isChecked);
   }
-  return /* @__PURE__ */ jsxs37("div", { className: "nu-tree-view__row", role: "none", children: [
-    /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38("div", { className: "nu-tree-view__row", role: "none", children: [
+    /* @__PURE__ */ jsxs38(
       "div",
       {
         "aria-checked": isCheckable ? isChecked : void 0,
@@ -8653,8 +8913,8 @@ function TreeViewItemInner({
         ref: (node) => registerItemRef(itemId, node),
         role: "treeitem",
         children: [
-          /* @__PURE__ */ jsxs37("span", { "aria-hidden": "true", className: "nu-tree-view__prefix", children: [
-            guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsxs38("span", { "aria-hidden": "true", className: "nu-tree-view__prefix", children: [
+            guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx58(
               "span",
               {
                 className: "nu-tree-view__guide",
@@ -8665,7 +8925,7 @@ function TreeViewItemInner({
               },
               `${itemId}-guide-${guideIndex}`
             )),
-            /* @__PURE__ */ jsxs37(
+            /* @__PURE__ */ jsxs38(
               "span",
               {
                 className: "nu-tree-view__lead",
@@ -8673,19 +8933,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 +8953,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 +8962,7 @@ function TreeViewItemInner({
                         }
                       )
                     }
-                  ) : depth > 0 ? /* @__PURE__ */ jsx57(
+                  ) : depth > 0 ? /* @__PURE__ */ jsx58(
                     "span",
                     {
                       className: "nu-tree-view__expander-placeholder",
@@ -8713,8 +8973,8 @@ function TreeViewItemInner({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs37("span", { className: "nu-tree-view__content", children: [
-            isCheckable ? /* @__PURE__ */ jsx57("span", { className: "nu-tree-view__check-slot", children: /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsxs38("span", { className: "nu-tree-view__content", children: [
+            isCheckable ? /* @__PURE__ */ jsx58("span", { className: "nu-tree-view__check-slot", children: /* @__PURE__ */ jsx58(
               "button",
               {
                 "aria-label": isChecked ? "Uncheck item" : "Check item",
@@ -8722,12 +8982,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 +8998,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 +9041,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 +9056,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 +9069,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 +9292,7 @@ function TreeViewInner({
       setExpandedState
     ]
   );
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     "div",
     {
       ...props,
@@ -9042,7 +9302,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 +9322,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 +9336,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 +9429,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 jsxs39 } 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
+  return /* @__PURE__ */ jsxs39(Fragment7, { children: [
+    /* @__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 +9473,14 @@ function TreeListViewRowInner({
   depth,
   expandedIdSet,
   getCellContent,
+  getDragItem,
   guideMask,
   guideOffsets,
   hasNextSibling,
   item,
   onActivateItem,
   onDoubleClickItem,
+  onItemDragOut,
   onPopupMenuItem,
   onToggleItemCheck,
   onToggleItemExpanded,
@@ -9240,6 +9502,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;
@@ -9285,8 +9559,8 @@ function TreeListViewRowInner({
     handleActivate();
     onToggleItemCheck?.(item, !isChecked);
   }
-  return /* @__PURE__ */ jsxs38(Fragment7, { children: [
-    /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsxs39(Fragment7, { children: [
+    /* @__PURE__ */ jsx60(
       "div",
       {
         "aria-disabled": item.disabled || void 0,
@@ -9304,13 +9578,17 @@ 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: {
           "--nu-tree-list-view-columns": templateColumns
         },
         children: columns.map(
-          (column, columnIndex) => column.id === treeColumnId ? /* @__PURE__ */ jsxs38(
+          (column, columnIndex) => column.id === treeColumnId ? /* @__PURE__ */ jsxs39(
             "span",
             {
               className: [
@@ -9322,8 +9600,8 @@ function TreeListViewRowInner({
               "data-column-id": column.id,
               role: "gridcell",
               children: [
-                /* @__PURE__ */ jsxs38("span", { "aria-hidden": "true", className: "nu-tree-list-view__prefix", children: [
-                  guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx59(
+                /* @__PURE__ */ jsxs39("span", { "aria-hidden": "true", className: "nu-tree-list-view__prefix", children: [
+                  guideMask.map((hasGuide, guideIndex) => /* @__PURE__ */ jsx60(
                     "span",
                     {
                       className: "nu-tree-list-view__guide",
@@ -9334,7 +9612,7 @@ function TreeListViewRowInner({
                     },
                     `${itemId}-guide-${guideIndex}`
                   )),
-                  /* @__PURE__ */ jsxs38(
+                  /* @__PURE__ */ jsxs39(
                     "span",
                     {
                       className: "nu-tree-list-view__lead",
@@ -9342,19 +9620,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 +9640,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 +9649,7 @@ function TreeListViewRowInner({
                               }
                             )
                           }
-                        ) : depth > 0 ? /* @__PURE__ */ jsx59(
+                        ) : depth > 0 ? /* @__PURE__ */ jsx60(
                           "span",
                           {
                             className: "nu-tree-list-view__expander-placeholder",
@@ -9382,8 +9660,8 @@ 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(
+                /* @__PURE__ */ jsxs39("span", { className: "nu-tree-list-view__tree-content", children: [
+                  isCheckable ? /* @__PURE__ */ jsx60("span", { className: "nu-tree-list-view__check-slot", children: /* @__PURE__ */ jsx60(
                     "button",
                     {
                       "aria-label": isChecked ? "Uncheck item" : "Check item",
@@ -9391,12 +9669,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 +9685,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 +9714,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 +9723,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 +9761,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 jsxs40 } from "react/jsx-runtime";
 function TreeListViewInner({
+  acceptsDrop,
   activeItemId: activeItemIdProp,
   checkedIds,
   className,
@@ -9494,21 +9775,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 +9807,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 +9824,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 +9832,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;
@@ -9911,7 +10205,7 @@ function TreeListViewInner({
     window.addEventListener("pointermove", handleColumnResizeMove);
     window.addEventListener("pointerup", handleColumnResizeEnd);
   }
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     "div",
     {
       ...props,
@@ -9919,11 +10213,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",
@@ -9931,7 +10225,7 @@ function TreeListViewInner({
             style: {
               "--nu-tree-list-view-columns": templateColumns
             },
-            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs39(
+            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs40(
               "span",
               {
                 className: [
@@ -9942,8 +10236,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 +10253,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 +10262,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 +10283,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 +10294,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 +10422,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 +10575,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 +10586,7 @@ function useNuTheme() {
 }
 
 // src/theme/NuThemeProvider.tsx
-import { jsx as jsx61, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
 function NuThemeProvider({
   children,
   className,
@@ -10356,7 +10652,7 @@ function NuThemeProvider({
     },
     [fontSize, onFontSizeChange]
   );
-  const contextValue = useMemo20(
+  const contextValue = useMemo21(
     () => ({
       desktopPatternMode: resolvedDesktopPatternMode,
       fontFamily: resolvedFontFamily,
@@ -10381,7 +10677,7 @@ function NuThemeProvider({
       handleThemeChange
     ]
   );
-  return /* @__PURE__ */ jsx61(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsx62(NuThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs41(
     "div",
     {
       className: ["nu-theme-root", className].filter(Boolean).join(" "),
@@ -10396,7 +10692,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 +10719,7 @@ export {
   NuAppHostProvider,
   NuCrtGlitch,
   NuDesktop,
+  NuDragDropProvider,
   NuGlyph,
   NuIconGrid,
   NuIconProvider,
@@ -10468,6 +10765,9 @@ export {
   resolveNuTheme,
   useAppHostMenu,
   useMainMenuState,
+  useNuDragDrop,
+  useNuDragSource,
+  useNuDropTarget,
   useNuIconManager,
   useNuTheme,
   useNuWindowManager,