@deadragdoll/reactnu 0.1.30 → 0.1.49

package/dist/components/IconGrid/IconGrid.types.d.ts

@@ -16,6 +16,8 @@ export type NuIconDefinition = {
     onContextMenu?: MouseEventHandler<HTMLButtonElement>;
     onDoubleClick?: MouseEventHandler<HTMLButtonElement>;
     onPositionChange?: (position: NuIconPosition, icon: NuIconInfo) => void;
+    /** Application-defined data preserved when the icon moves to another grid. */
+    payload?: unknown;
     position?: NuIconPosition;
 };
 export type NuIconInfo = Omit<NuIconDefinition, "id" | "position"> & {
@@ -33,3 +35,10 @@ export type NuIconManager = {
     updateIcon: (id: string, patch: Partial<Omit<NuIconDefinition, "id">>) => void;
 };
 export type NuIconContextMenuItems = MainMenuNode[] | ((manager: NuIconManager) => MainMenuNode[]);
+export type NuIconDropContext = {
+    position: NuIconPosition;
+    source: NuIconManager;
+    sourceGrid: HTMLElement;
+    target: NuIconManager;
+    targetGrid: HTMLElement;
+};

package/dist/components/IconGrid/NuIconGrid.d.ts

@@ -1,7 +1,15 @@
 import { HTMLAttributes } from "react";
-import { NuIconContextMenuItems, NuIconArrangeMode } from "./IconGrid.types";
+import { NuIconContextMenuItems, NuIconArrangeMode, NuIconDropContext, NuIconInfo } from "./IconGrid.types";
 export type NuIconGridProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Filters icons accepted from another grid before `onIconDrop` is called. */
+    accepts?: (icon: NuIconInfo) => boolean;
     contextMenuItems?: NuIconContextMenuItems;
     defaultArrangeMode?: NuIconArrangeMode;
+    /** Enables hit testing for a non-interactive grid surface behind other content. */
+    dropTarget?: boolean;
+    /** Called by the target grid before an icon is transferred. Return false to reject the drop. */
+    onIconDrop?: (icon: NuIconInfo, context: NuIconDropContext) => boolean | void;
+    /** Called by the source grid after its icon was transferred to another grid. */
+    onIconMoveOut?: (icon: NuIconInfo, context: NuIconDropContext) => void;
 };
-export declare function NuIconGrid({ className, contextMenuItems: contextMenuItemsSource, defaultArrangeMode, onContextMenu, onPointerDown, ...props }: NuIconGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function NuIconGrid({ accepts, className, contextMenuItems: contextMenuItemsSource, defaultArrangeMode, dropTarget, onIconDrop, onIconMoveOut, onContextMenu, onPointerDown, ...props }: NuIconGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ListBox/ListBox.d.ts

@@ -1,4 +1,4 @@
-import { ForwardedRef, HTMLAttributes, RefAttributes } from "react";
+import { ForwardedRef, HTMLAttributes, MouseEvent, RefAttributes } from "react";
 import { ListBoxGroup, ListBoxItem } from "./internals/types";
 export type { ListBoxCategory, ListBoxGroup, ListBoxItem, ListBoxLabel } from "./internals/types";
 export type ListBoxHandle = {
@@ -11,6 +11,7 @@ export type ListBoxHandle = {
 export type ListBoxProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
     data: ListBoxGroup[];
     checkedIds?: string[];
+    onPopupMenu?: (event: MouseEvent<HTMLDivElement>, item: ListBoxItem, group: ListBoxGroup) => void;
     emptyText?: string;
     onItemCheckChange?: (item: ListBoxItem, group: ListBoxGroup, checked: boolean) => void;
     onItemDoubleClick?: (item: ListBoxItem, group: ListBoxGroup) => void;
@@ -19,5 +20,5 @@ export type ListBoxProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
     uncheckedShape?: "box" | "none";
     onItemSelect?: (item: ListBoxItem, group: ListBoxGroup) => void;
 };
-declare function ListBoxInner({ className, data, checkedIds, emptyText, onItemCheckChange, onItemDoubleClick, onItemSelect, rightCheckBox, selectedId, uncheckedShape, ...props }: ListBoxProps, ref: ForwardedRef<ListBoxHandle>): import("react/jsx-runtime").JSX.Element;
+declare function ListBoxInner({ className, data, checkedIds, emptyText, onPopupMenu, onItemCheckChange, onItemDoubleClick, onItemSelect, rightCheckBox, selectedId, uncheckedShape, ...props }: ListBoxProps, ref: ForwardedRef<ListBoxHandle>): import("react/jsx-runtime").JSX.Element;
 export declare const ListBox: (props: ListBoxProps & RefAttributes<ListBoxHandle>) => ReturnType<typeof ListBoxInner>;

package/dist/components/ListBox/internals/ListBoxGroupView.d.ts

@@ -1,3 +1,4 @@
+import { MouseEvent } from "react";
 import { ListBoxGroup, ListBoxItem } from "./types";
 type ListBoxGroupViewProps = {
     group: ListBoxGroup;
@@ -6,6 +7,7 @@ type ListBoxGroupViewProps = {
     listboxId: string;
     onActivateItem: (item: ListBoxItem, group: ListBoxGroup, itemId: string) => void;
     onDoubleClickItem?: (item: ListBoxItem, group: ListBoxGroup) => void;
+    onPopupMenuItem?: (event: MouseEvent<HTMLDivElement>, item: ListBoxItem, group: ListBoxGroup, itemId: string) => void;
     onToggleItemCheck: (itemId: string) => void;
     registerItemRef: (itemId: string, node: HTMLDivElement | null) => void;
     resolvedActiveId: string | null;
@@ -13,5 +15,5 @@ type ListBoxGroupViewProps = {
     selectedId?: string;
     uncheckedShape: "box" | "none";
 };
-export declare function ListBoxGroupView({ group, groupIndex, isItemChecked, listboxId, onActivateItem, onDoubleClickItem, onToggleItemCheck, registerItemRef, resolvedActiveId, rightCheckBox, selectedId, uncheckedShape }: ListBoxGroupViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListBoxGroupView({ group, groupIndex, isItemChecked, listboxId, onActivateItem, onDoubleClickItem, onPopupMenuItem, onToggleItemCheck, registerItemRef, resolvedActiveId, rightCheckBox, selectedId, uncheckedShape }: ListBoxGroupViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ListBox/internals/ListBoxItemView.d.ts

@@ -1,3 +1,4 @@
+import { MouseEvent } from "react";
 import { ListBoxGroup, ListBoxItem } from "./types";
 type ListBoxItemViewProps = {
     group: ListBoxGroup;
@@ -8,11 +9,12 @@ type ListBoxItemViewProps = {
     itemId: string;
     onActivate: (item: ListBoxItem, group: ListBoxGroup, itemId: string) => void;
     onDoubleClick?: (item: ListBoxItem, group: ListBoxGroup) => void;
+    onPopupMenu?: (event: MouseEvent<HTMLDivElement>, item: ListBoxItem, group: ListBoxGroup, itemId: string) => void;
     onToggleCheck: (itemId: string) => void;
     registerItemRef: (itemId: string, node: HTMLDivElement | null) => void;
     rightCheckBox: boolean;
     uncheckedShape: "box" | "none";
 };
-declare function ListBoxItemViewInner({ group, isActive, isChecked, isSelected, item, itemId, onActivate, onDoubleClick, onToggleCheck, registerItemRef, rightCheckBox, uncheckedShape }: ListBoxItemViewProps): import("react/jsx-runtime").JSX.Element;
+declare function ListBoxItemViewInner({ group, isActive, isChecked, isSelected, item, itemId, onActivate, onPopupMenu, onDoubleClick, onToggleCheck, registerItemRef, rightCheckBox, uncheckedShape }: ListBoxItemViewProps): import("react/jsx-runtime").JSX.Element;
 export declare const ListBoxItemView: import("react").MemoExoticComponent<typeof ListBoxItemViewInner>;
 export {};

package/dist/components/TreeListView/TreeListView.d.ts

@@ -1,5 +1,5 @@
-import { ForwardedRef, HTMLAttributes, RefAttributes } from "react";
-import { TreeListColumn, TreeListGetCellContent, TreeListItemBase } from "./internals/types";
+import { ForwardedRef, HTMLAttributes, MouseEvent, RefAttributes } from "react";
+import { TreeListColumn, TreeListCellContext, TreeListGetCellContent, TreeListItemBase } from "./internals/types";
 export type { TreeListCellContext, TreeListColumn, TreeListGetCellContent, TreeListItemBase } from "./internals/types";
 export type TreeListViewHandle = {
     activateItem: (itemId: string) => void;
@@ -13,6 +13,7 @@ export type TreeListViewHandle = {
 export type TreeListViewProps<T extends TreeListItemBase<T>> = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
     activeItemId?: string;
     checkedIds?: string[];
+    onPopupMenu?: (event: MouseEvent<HTMLDivElement>, item: T, context: TreeListCellContext<T>) => void;
     columns: TreeListColumn<T>[];
     data: T[];
     dataVersion?: number;
@@ -29,5 +30,5 @@ export type TreeListViewProps<T extends TreeListItemBase<T>> = Omit<HTMLAttribut
     selectedId?: string;
     uncheckedShape?: "box" | "none";
 };
-declare function TreeListViewInner<T extends TreeListItemBase<T>>({ activeItemId: activeItemIdProp, checkedIds, className, columns, data, dataVersion, defaultActiveItemId, defaultExpandedIds, emptyText, expandedIds, getCellContent, onActiveItemChange, onExpandedIdsChange, onItemCheckChange, onItemDoubleClick, onItemSelect, selectedId, uncheckedShape, ...props }: TreeListViewProps<T>, ref: ForwardedRef<TreeListViewHandle>): import("react/jsx-runtime").JSX.Element;
+declare function TreeListViewInner<T extends TreeListItemBase<T>>({ activeItemId: activeItemIdProp, checkedIds, className, columns, onPopupMenu, data, dataVersion, defaultActiveItemId, defaultExpandedIds, emptyText, expandedIds, getCellContent, onActiveItemChange, onExpandedIdsChange, onItemCheckChange, onItemDoubleClick, onItemSelect, selectedId, uncheckedShape, ...props }: TreeListViewProps<T>, ref: ForwardedRef<TreeListViewHandle>): import("react/jsx-runtime").JSX.Element;
 export declare const TreeListView: <T extends TreeListItemBase<T>>(props: TreeListViewProps<T> & RefAttributes<TreeListViewHandle>) => ReturnType<typeof TreeListViewInner>;

package/dist/components/TreeListView/internals/TreeListViewRow.d.ts

@@ -1,4 +1,5 @@
-import { TreeListColumn, TreeListGetCellContent, TreeListItemBase } from "./types";
+import { MouseEvent } from "react";
+import { TreeListCellContext, TreeListColumn, TreeListGetCellContent, TreeListItemBase } from "./types";
 type TreeListViewRowProps<T extends TreeListItemBase<T>> = {
     activeItemId: string | null;
     checkedIds?: string[];
@@ -12,6 +13,7 @@ type TreeListViewRowProps<T extends TreeListItemBase<T>> = {
     item: T;
     onActivateItem: (item: T, itemId: string) => void;
     onDoubleClickItem?: (item: T) => void;
+    onPopupMenuItem?: (event: MouseEvent<HTMLDivElement>, item: T, context: TreeListCellContext<T>) => void;
     onToggleItemCheck?: (item: T, checked: boolean) => void;
     onToggleItemExpanded: (item: T, expanded: boolean) => void;
     originOffset: number;
@@ -23,6 +25,6 @@ type TreeListViewRowProps<T extends TreeListItemBase<T>> = {
     treeId: string;
     uncheckedShape: "box" | "none";
 };
-declare function TreeListViewRowInner<T extends TreeListItemBase<T>>({ activeItemId, checkedIds, columns, depth, expandedIdSet, getCellContent, guideMask, guideOffsets, hasNextSibling, item, onActivateItem, onDoubleClickItem, onToggleItemCheck, onToggleItemExpanded, originOffset, registerItemRef, rowIndexMap, selectedItemId, templateColumns, treeColumnId, treeId, uncheckedShape }: TreeListViewRowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function TreeListViewRowInner<T extends TreeListItemBase<T>>({ activeItemId, checkedIds, columns, depth, expandedIdSet, getCellContent, guideMask, guideOffsets, hasNextSibling, item, onActivateItem, onDoubleClickItem, onPopupMenuItem, onToggleItemCheck, onToggleItemExpanded, originOffset, registerItemRef, rowIndexMap, selectedItemId, templateColumns, treeColumnId, treeId, uncheckedShape }: TreeListViewRowProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare const TreeListViewRow: typeof TreeListViewRowInner;
 export {};

package/dist/index.cjs

@@ -1024,6 +1024,7 @@ function ListBoxItemViewInner({
   item,
   itemId,
   onActivate,
+  onPopupMenu,
   onDoubleClick,
   onToggleCheck,
   registerItemRef,
@@ -1042,6 +1043,9 @@ function ListBoxItemViewInner({
       onDoubleClick?.(item, group);
     }
   }
+  function handleContextMenu(event) {
+    onPopupMenu?.(event, item, group, itemId);
+  }
   function handleToggleCheck() {
     onToggleCheck(itemId);
   }
@@ -1070,6 +1074,7 @@ function ListBoxItemViewInner({
       ].filter(Boolean).join(" "),
       id: itemId,
       onClick: handleActivate,
+      onContextMenu: onPopupMenu ? handleContextMenu : void 0,
       onDoubleClick: handleDoubleClick,
       ref: (node) => registerItemRef(itemId, node),
       role: "option",
@@ -1095,6 +1100,7 @@ function ListBoxGroupView({
   listboxId,
   onActivateItem,
   onDoubleClickItem,
+  onPopupMenuItem,
   onToggleItemCheck,
   registerItemRef,
   resolvedActiveId,
@@ -1126,6 +1132,7 @@ function ListBoxGroupView({
           itemId,
           onActivate: onActivateItem,
           onDoubleClick: onDoubleClickItem,
+          onPopupMenu: onPopupMenuItem,
           onToggleCheck: onToggleItemCheck,
           registerItemRef,
           rightCheckBox,
@@ -1144,6 +1151,7 @@ function ListBoxInner({
   data,
   checkedIds,
   emptyText = "No items",
+  onPopupMenu,
   onItemCheckChange,
   onItemDoubleClick,
   onItemSelect,
@@ -1203,6 +1211,18 @@ function ListBoxInner({
     },
     [activateItem, selectableItems]
   );
+  const handleItemPopupMenu = (0, import_react5.useCallback)(
+    (event, item, group, itemId) => {
+      if (item.disabled || !onPopupMenu) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      activateItem(item, group, itemId);
+      onPopupMenu(event, item, group);
+    },
+    [activateItem, onPopupMenu]
+  );
   function moveActive(direction) {
     if (selectableItems.length === 0) {
       return;
@@ -1323,6 +1343,7 @@ function ListBoxInner({
           listboxId,
           onActivateItem: activateItem,
           onDoubleClickItem: onItemDoubleClick,
+          onPopupMenuItem: handleItemPopupMenu,
           onToggleItemCheck: toggleItemCheck,
           registerItemRef,
           resolvedActiveId,
@@ -1998,8 +2019,6 @@ function WindowInner({
       return;
     }
     onActivate?.();
-    event.preventDefault();
-    event.stopPropagation();
   }
   function handleTitlePointerDown(event) {
     onActivate?.();
@@ -4583,6 +4602,7 @@ function useNuIconGridContext() {
 // src/components/IconGrid/NuIconGrid.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var DRAG_THRESHOLD = 3;
+var gridRegistrations = /* @__PURE__ */ new Map();
 function clamp2(value, minimum, maximum) {
   return Math.min(Math.max(value, minimum), maximum);
 }
@@ -4592,11 +4612,85 @@ function resolveIconContextMenuItems(source, icon) {
 function resolveGridContextMenuItems(source, manager) {
   return typeof source === "function" ? source(manager) : source ?? [];
 }
-function NuIconGridItem({ gridElement, icon }) {
+function findGridRegistrationAtPoint(clientX, clientY) {
+  const target = document.elementFromPoint(clientX, clientY);
+  const gridElement = target?.closest(".nu-icon-grid");
+  if (gridElement) {
+    return gridRegistrations.get(gridElement);
+  }
+  if (target?.closest(".nu-window")) {
+    return void 0;
+  }
+  return Array.from(gridRegistrations.values()).reverse().find((registration) => {
+    if (!registration.dropTarget) {
+      return false;
+    }
+    const rect = registration.element.getBoundingClientRect();
+    return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+  });
+}
+function getTransferredPosition(targetGrid, iconElement, clientX, clientY) {
+  const targetRect = targetGrid.getBoundingClientRect();
+  const iconRect = iconElement.getBoundingClientRect();
+  return {
+    x: Math.round(
+      clamp2(
+        clientX - targetRect.left - iconRect.width / 2,
+        0,
+        Math.max(0, targetRect.width - iconRect.width)
+      )
+    ),
+    y: Math.round(
+      clamp2(
+        clientY - targetRect.top - iconRect.height / 2,
+        0,
+        Math.max(0, targetRect.height - iconRect.height)
+      )
+    )
+  };
+}
+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,
+  onIconMoveOut
+}) {
   const manager = useNuIconGridContext();
   const contextMenu = usePopupMenu();
   const dragStartRef = (0, import_react25.useRef)(void 0);
   const isDraggingRef = (0, import_react25.useRef)(false);
+  const dragPreviewRef = (0, import_react25.useRef)(null);
   const [isDragging, setIsDragging] = (0, import_react25.useState)(false);
   const suppressClickRef = (0, import_react25.useRef)(false);
   const latestPositionRef = (0, import_react25.useRef)(icon.position);
@@ -4604,6 +4698,11 @@ function NuIconGridItem({ gridElement, icon }) {
     icon.contextMenuItems,
     icon
   );
+  function removeDragPreview() {
+    dragPreviewRef.current?.remove();
+    dragPreviewRef.current = null;
+  }
+  (0, import_react25.useEffect)(() => removeDragPreview, []);
   function handlePointerDown(event) {
     if (event.button !== 0 || icon.disabled) {
       return;
@@ -4629,8 +4728,19 @@ function NuIconGridItem({ gridElement, icon }) {
     if (!isDraggingRef.current && Math.max(Math.abs(deltaX), Math.abs(deltaY)) < DRAG_THRESHOLD) {
       return;
     }
-    isDraggingRef.current = true;
-    setIsDragging(true);
+    if (!isDraggingRef.current) {
+      isDraggingRef.current = true;
+      setIsDragging(true);
+      dragPreviewRef.current = createDragPreview(event.currentTarget);
+    }
+    if (dragPreviewRef.current) {
+      moveDragPreview(
+        dragPreviewRef.current,
+        event.currentTarget,
+        event.clientX,
+        event.clientY
+      );
+    }
     const gridRect = gridElement.getBoundingClientRect();
     const iconRect = event.currentTarget.getBoundingClientRect();
     const position = {
@@ -4650,7 +4760,6 @@ function NuIconGridItem({ gridElement, icon }) {
       )
     };
     latestPositionRef.current = position;
-    manager.moveIcon(icon.id, position);
   }
   function finishDragging(event) {
     const dragStart = dragStartRef.current;
@@ -4661,16 +4770,56 @@ function NuIconGridItem({ gridElement, icon }) {
       event.currentTarget.releasePointerCapture(event.pointerId);
     }
     dragStartRef.current = void 0;
+    removeDragPreview();
     if (!isDraggingRef.current) {
       return;
     }
     suppressClickRef.current = true;
     isDraggingRef.current = false;
     setIsDragging(false);
-    icon.onPositionChange?.(latestPositionRef.current, {
-      ...icon,
-      position: latestPositionRef.current
-    });
+    if (event.type === "pointercancel" || !gridElement) {
+      return;
+    }
+    const targetRegistration = findGridRegistrationAtPoint(
+      event.clientX,
+      event.clientY
+    );
+    if (!targetRegistration) {
+      return;
+    }
+    if (targetRegistration.element === gridElement) {
+      manager.moveIcon(icon.id, latestPositionRef.current);
+      icon.onPositionChange?.(latestPositionRef.current, {
+        ...icon,
+        position: latestPositionRef.current
+      });
+      return;
+    }
+    if (!targetRegistration.manager.icons.some(
+      (targetIcon) => targetIcon.id === icon.id
+    )) {
+      const position = getTransferredPosition(
+        targetRegistration.element,
+        event.currentTarget,
+        event.clientX,
+        event.clientY
+      );
+      const transferredIcon = { ...icon, position };
+      const context = {
+        position,
+        source: manager,
+        sourceGrid: gridElement,
+        target: targetRegistration.manager,
+        targetGrid: targetRegistration.element
+      };
+      if (targetRegistration.accepts?.(transferredIcon) !== false && targetRegistration.onIconDrop?.(transferredIcon, context) !== false) {
+        targetRegistration.manager.addIcon(transferredIcon);
+        targetRegistration.manager.selectIcon(transferredIcon.id);
+        manager.removeIcon(icon.id);
+        onIconMoveOut?.(transferredIcon, context);
+        return;
+      }
+    }
   }
   function handleClick(event) {
     if (suppressClickRef.current) {
@@ -4736,9 +4885,13 @@ function NuIconGridItem({ gridElement, icon }) {
   ] });
 }
 function NuIconGrid({
+  accepts,
   className,
   contextMenuItems: contextMenuItemsSource,
   defaultArrangeMode,
+  dropTarget = false,
+  onIconDrop,
+  onIconMoveOut,
   onContextMenu,
   onPointerDown,
   ...props
@@ -4774,6 +4927,21 @@ function NuIconGrid({
     resizeObserver.observe(gridElement);
     return () => resizeObserver.disconnect();
   }, [arrangeIcons, defaultArrangeMode, gridElement, setGridSize]);
+  (0, import_react25.useLayoutEffect)(() => {
+    if (!gridElement) {
+      return;
+    }
+    gridRegistrations.set(gridElement, {
+      accepts,
+      dropTarget,
+      element: gridElement,
+      manager,
+      onIconDrop
+    });
+    return () => {
+      gridRegistrations.delete(gridElement);
+    };
+  }, [accepts, dropTarget, gridElement, manager, onIconDrop]);
   function handleContextMenu(event) {
     onContextMenu?.(event);
     if (event.defaultPrevented || contextMenuItems.length === 0) {
@@ -4802,7 +4970,15 @@ function NuIconGrid({
       ref: setGridElement,
       role: "group",
       children: [
-        manager.icons.map((icon) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NuIconGridItem, { gridElement, icon }, icon.id)),
+        manager.icons.map((icon) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          NuIconGridItem,
+          {
+            gridElement,
+            icon,
+            onIconMoveOut
+          },
+          icon.id
+        )),
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           PopupMenu,
           {
@@ -9004,6 +9180,7 @@ function TreeListViewRowInner({
   item,
   onActivateItem,
   onDoubleClickItem,
+  onPopupMenuItem,
   onToggleItemCheck,
   onToggleItemExpanded,
   originOffset,
@@ -9042,6 +9219,17 @@ function TreeListViewRowInner({
     }
     onDoubleClickItem?.(item);
   }
+  function handleContextMenu(event) {
+    if (item.disabled) {
+      return;
+    }
+    onPopupMenuItem?.(event, item, {
+      depth,
+      isLeaf: !hasChildren,
+      item,
+      rowIndex
+    });
+  }
   function handleToggleExpanded(event) {
     event.stopPropagation();
     if (item.disabled || !hasChildren) {
@@ -9075,6 +9263,7 @@ function TreeListViewRowInner({
         ].filter(Boolean).join(" "),
         id: `${treeId}-${itemId}`,
         onClick: handleActivate,
+        onContextMenu: onPopupMenuItem ? handleContextMenu : void 0,
         onDoubleClick: handleDoubleClick,
         ref: (node) => registerItemRef(itemId, node),
         role: "row",
@@ -9223,6 +9412,7 @@ function TreeListViewRowInner({
         item: child,
         onActivateItem,
         onDoubleClickItem,
+        onPopupMenuItem,
         onToggleItemCheck,
         onToggleItemExpanded,
         originOffset: originOffset + leadOffset,
@@ -9244,7 +9434,7 @@ function areTreeListViewRowPropsEqual(previousProps, nextProps) {
   return !didActivePathChange && !didSelectedPathChange && previousProps.checkedIds === nextProps.checkedIds && previousProps.columns === nextProps.columns && previousProps.depth === nextProps.depth && previousProps.expandedIdSet === nextProps.expandedIdSet && previousProps.getCellContent === nextProps.getCellContent && areTreeListGuideArraysEqual(previousProps.guideMask, nextProps.guideMask) && areTreeListGuideArraysEqual(
     previousProps.guideOffsets,
     nextProps.guideOffsets
-  ) && previousProps.hasNextSibling === nextProps.hasNextSibling && previousProps.item === nextProps.item && previousProps.onActivateItem === nextProps.onActivateItem && previousProps.onDoubleClickItem === nextProps.onDoubleClickItem && previousProps.onToggleItemCheck === nextProps.onToggleItemCheck && previousProps.onToggleItemExpanded === nextProps.onToggleItemExpanded && previousProps.originOffset === nextProps.originOffset && previousProps.registerItemRef === nextProps.registerItemRef && previousProps.rowIndexMap === nextProps.rowIndexMap && previousProps.templateColumns === nextProps.templateColumns && previousProps.treeColumnId === nextProps.treeColumnId && previousProps.treeId === nextProps.treeId && previousProps.uncheckedShape === nextProps.uncheckedShape;
+  ) && previousProps.hasNextSibling === nextProps.hasNextSibling && previousProps.item === nextProps.item && previousProps.onActivateItem === nextProps.onActivateItem && previousProps.onDoubleClickItem === nextProps.onDoubleClickItem && previousProps.onPopupMenuItem === nextProps.onPopupMenuItem && previousProps.onToggleItemCheck === nextProps.onToggleItemCheck && previousProps.onToggleItemExpanded === nextProps.onToggleItemExpanded && previousProps.originOffset === nextProps.originOffset && previousProps.registerItemRef === nextProps.registerItemRef && previousProps.rowIndexMap === nextProps.rowIndexMap && previousProps.templateColumns === nextProps.templateColumns && previousProps.treeColumnId === nextProps.treeColumnId && previousProps.treeId === nextProps.treeId && previousProps.uncheckedShape === nextProps.uncheckedShape;
 }
 var TreeListViewRow = (0, import_react44.memo)(
   TreeListViewRowInner,
@@ -9258,6 +9448,7 @@ function TreeListViewInner({
   checkedIds,
   className,
   columns,
+  onPopupMenu,
   data,
   dataVersion,
   defaultActiveItemId,
@@ -9427,6 +9618,18 @@ function TreeListViewInner({
     },
     [onItemSelect, selectedId, updateActiveItem]
   );
+  const handleItemPopupMenu = (0, import_react45.useCallback)(
+    (event, item, context) => {
+      if (item.disabled || !onPopupMenu) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      activateEntry(item, item.id);
+      onPopupMenu(event, item, context);
+    },
+    [activateEntry, onPopupMenu]
+  );
   const activateResolvedItem = (0, import_react45.useCallback)(
     (itemId) => {
       if (!itemId) {
@@ -9732,6 +9935,7 @@ function TreeListViewInner({
             item,
             onActivateItem: activateEntry,
             onDoubleClickItem: onItemDoubleClick ? handleItemDoubleClick : void 0,
+            onPopupMenuItem: handleItemPopupMenu,
             onToggleItemCheck: handleItemCheckChange,
             onToggleItemExpanded: setExpandedState,
             originOffset: 0,
@@ -9768,10 +9972,12 @@ var classicTheme = {
     panelBackground: "#6262e3",
     panelInsetBackground: "#6262e3",
     titleBackground: "#ffffff",
+    menuBackground: "#ffffff",
     titleText: "#1f36bc",
     textPrimary: "#ffffff",
     textMuted: "#dfe3ff",
     textInverse: "#000000",
+    mainMenuText: "#000000",
     textAccent: "#ffff55",
     textHotkey: "#ff5555",
     buttonFace: "#ffffff",
@@ -9804,10 +10010,12 @@ var amberTheme = {
     panelBackground: "#4b2b00",
     panelInsetBackground: "#382000",
     titleBackground: "#ffd28f",
+    menuBackground: "#ffd28f",
     titleText: "#4b2b00",
     textPrimary: "#ffd28f",
     textMuted: "#d6b57a",
     textInverse: "#201000",
+    mainMenuText: "#201000",
     textAccent: "#fff27a",
     textHotkey: "#ff5f00",
     buttonFace: "#ffd28f",
@@ -9840,10 +10048,12 @@ var phosphorTheme = {
     panelBackground: "#11351a",
     panelInsetBackground: "#0d2813",
     titleBackground: "#b7ffbf",
+    menuBackground: "#b7ffbf",
     titleText: "#0b2310",
     textPrimary: "#b7ffbf",
     textMuted: "#8ed39a",
     textInverse: "#061208",
+    mainMenuText: "#061208",
     textAccent: "#f7ff7a",
     textHotkey: "#ff6f6f",
     buttonFace: "#b7ffbf",
@@ -9876,10 +10086,12 @@ var midnightTheme = {
     panelBackground: "#17273b",
     panelInsetBackground: "#111e2e",
     titleBackground: "#d4dde8",
+    menuBackground: "#d4dde8",
     titleText: "#14233a",
     textPrimary: "#e6edf7",
     textMuted: "#aebdcd",
     textInverse: "#0b1220",
+    mainMenuText: "#0b1220",
     textAccent: "#ffd166",
     textHotkey: "#ff7171",
     buttonFace: "#d4dde8",
@@ -9912,10 +10124,12 @@ var grayscaleTheme = {
     panelBackground: "#3f3f3f",
     panelInsetBackground: "#343434",
     titleBackground: "#262626",
+    menuBackground: "#262626",
     titleText: "#d0d0d0",
     textPrimary: "#c8c8c8",
     textMuted: "#969696",
     textInverse: "#d0d0d0",
+    mainMenuText: "#d0d0d0",
     textAccent: "#e0e0e0",
     textHotkey: "#ffffff",
     buttonFace: "#5b5b5b",
@@ -9959,10 +10173,12 @@ function getNuThemeStyle(theme) {
     "--nu-color-panel": theme.tokens.panelBackground,
     "--nu-color-panel-inset": theme.tokens.panelInsetBackground,
     "--nu-color-title-bg": theme.tokens.titleBackground,
+    "--nu-color-menu": theme.tokens.menuBackground,
     "--nu-color-title-text": theme.tokens.titleText,
     "--nu-text-primary": theme.tokens.textPrimary,
     "--nu-text-muted": theme.tokens.textMuted,
     "--nu-text-inverse": theme.tokens.textInverse,
+    "--nu-main-menu-text": theme.tokens.mainMenuText,
     "--nu-text-accent": theme.tokens.textAccent,
     "--nu-text-hotkey": theme.tokens.textHotkey,
     "--nu-color-button-face": theme.tokens.buttonFace,
@@ -10046,6 +10262,7 @@ function NuThemeProvider({
   onFontFamilyChange,
   onFontSizeChange,
   onThemeChange,
+  style,
   theme
 }) {
   const generatedId = (0, import_react47.useId)();
@@ -10131,7 +10348,8 @@ function NuThemeProvider({
         ...getNuThemeStyle(resolvedTheme),
         "--nu-font-body": resolvedFontFamily,
         fontFamily: resolvedFontFamily,
-        fontSize: `${resolvedFontSize}px`
+        fontSize: `${resolvedFontSize}px`,
+        ...style
       },
       children: [
         crtGlitch ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(NuCrtGlitch, { ...typeof crtGlitch === "object" ? crtGlitch : {} }) : null,