@deadragdoll/reactnu 0.1.30 → 0.1.49

package/dist/index.js

@@ -945,6 +945,7 @@ function ListBoxItemViewInner({
   item,
   itemId,
   onActivate,
+  onPopupMenu,
   onDoubleClick,
   onToggleCheck,
   registerItemRef,
@@ -963,6 +964,9 @@ function ListBoxItemViewInner({
       onDoubleClick?.(item, group);
     }
   }
+  function handleContextMenu(event) {
+    onPopupMenu?.(event, item, group, itemId);
+  }
   function handleToggleCheck() {
     onToggleCheck(itemId);
   }
@@ -991,6 +995,7 @@ function ListBoxItemViewInner({
       ].filter(Boolean).join(" "),
       id: itemId,
       onClick: handleActivate,
+      onContextMenu: onPopupMenu ? handleContextMenu : void 0,
       onDoubleClick: handleDoubleClick,
       ref: (node) => registerItemRef(itemId, node),
       role: "option",
@@ -1016,6 +1021,7 @@ function ListBoxGroupView({
   listboxId,
   onActivateItem,
   onDoubleClickItem,
+  onPopupMenuItem,
   onToggleItemCheck,
   registerItemRef,
   resolvedActiveId,
@@ -1047,6 +1053,7 @@ function ListBoxGroupView({
           itemId,
           onActivate: onActivateItem,
           onDoubleClick: onDoubleClickItem,
+          onPopupMenu: onPopupMenuItem,
           onToggleCheck: onToggleItemCheck,
           registerItemRef,
           rightCheckBox,
@@ -1065,6 +1072,7 @@ function ListBoxInner({
   data,
   checkedIds,
   emptyText = "No items",
+  onPopupMenu,
   onItemCheckChange,
   onItemDoubleClick,
   onItemSelect,
@@ -1124,6 +1132,18 @@ function ListBoxInner({
     },
     [activateItem, selectableItems]
   );
+  const handleItemPopupMenu = useCallback2(
+    (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;
@@ -1244,6 +1264,7 @@ function ListBoxInner({
           listboxId,
           onActivateItem: activateItem,
           onDoubleClickItem: onItemDoubleClick,
+          onPopupMenuItem: handleItemPopupMenu,
           onToggleItemCheck: toggleItemCheck,
           registerItemRef,
           resolvedActiveId,
@@ -1933,8 +1954,6 @@ function WindowInner({
       return;
     }
     onActivate?.();
-    event.preventDefault();
-    event.stopPropagation();
   }
   function handleTitlePointerDown(event) {
     onActivate?.();
@@ -4271,6 +4290,7 @@ function InfoAccent({
 
 // src/components/IconGrid/NuIconGrid.tsx
 import {
+  useEffect as useEffect8,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo8,
   useRef as useRef9,
@@ -4542,6 +4562,7 @@ 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;
+var gridRegistrations = /* @__PURE__ */ new Map();
 function clamp2(value, minimum, maximum) {
   return Math.min(Math.max(value, minimum), maximum);
 }
@@ -4551,11 +4572,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 = useRef9(void 0);
   const isDraggingRef = useRef9(false);
+  const dragPreviewRef = useRef9(null);
   const [isDragging, setIsDragging] = useState15(false);
   const suppressClickRef = useRef9(false);
   const latestPositionRef = useRef9(icon.position);
@@ -4563,6 +4658,11 @@ function NuIconGridItem({ gridElement, icon }) {
     icon.contextMenuItems,
     icon
   );
+  function removeDragPreview() {
+    dragPreviewRef.current?.remove();
+    dragPreviewRef.current = null;
+  }
+  useEffect8(() => removeDragPreview, []);
   function handlePointerDown(event) {
     if (event.button !== 0 || icon.disabled) {
       return;
@@ -4588,8 +4688,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 = {
@@ -4609,7 +4720,6 @@ function NuIconGridItem({ gridElement, icon }) {
       )
     };
     latestPositionRef.current = position;
-    manager.moveIcon(icon.id, position);
   }
   function finishDragging(event) {
     const dragStart = dragStartRef.current;
@@ -4620,16 +4730,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) {
@@ -4695,9 +4845,13 @@ function NuIconGridItem({ gridElement, icon }) {
   ] });
 }
 function NuIconGrid({
+  accepts,
   className,
   contextMenuItems: contextMenuItemsSource,
   defaultArrangeMode,
+  dropTarget = false,
+  onIconDrop,
+  onIconMoveOut,
   onContextMenu,
   onPointerDown,
   ...props
@@ -4733,6 +4887,21 @@ function NuIconGrid({
     resizeObserver.observe(gridElement);
     return () => resizeObserver.disconnect();
   }, [arrangeIcons, defaultArrangeMode, gridElement, setGridSize]);
+  useLayoutEffect4(() => {
+    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) {
@@ -4761,7 +4930,15 @@ function NuIconGrid({
       ref: setGridElement,
       role: "group",
       children: [
-        manager.icons.map((icon) => /* @__PURE__ */ jsx35(NuIconGridItem, { gridElement, icon }, icon.id)),
+        manager.icons.map((icon) => /* @__PURE__ */ jsx35(
+          NuIconGridItem,
+          {
+            gridElement,
+            icon,
+            onIconMoveOut
+          },
+          icon.id
+        )),
         /* @__PURE__ */ jsx35(
           PopupMenu,
           {
@@ -4936,7 +5113,7 @@ function NuIconProvider({
 
 // src/components/ComboBox/ComboBox.tsx
 import {
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useId as useId5,
   useMemo as useMemo10,
   useRef as useRef11,
@@ -5027,7 +5204,7 @@ function ComboBox({
   );
   const popupRoot = typeof document === "undefined" ? null : resolveComboBoxPortalRoot();
   const [themePortalStyle, setThemePortalStyle] = useState17(() => void 0);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!open) {
       return;
     }
@@ -5386,7 +5563,7 @@ function CommandButton({
 }
 
 // src/components/CrtGlitch/CrtGlitch.tsx
-import { useEffect as useEffect9, useId as useId6, useRef as useRef12 } from "react";
+import { useEffect as useEffect10, useId as useId6, useRef as useRef12 } from "react";
 import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 var DEFAULT_INTERVAL_MS = 3e3;
 var DEFAULT_DURATION_MS = 2500;
@@ -5419,7 +5596,7 @@ function NuCrtGlitch({
   const bOffsetRef = useRef12(null);
   const rafRef = useRef12(null);
   const targetElRef = useRef12(null);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!enabled) {
       return;
     }
@@ -5594,7 +5771,7 @@ function NuCrtGlitch({
 import {
   forwardRef as forwardRef2,
   useCallback as useCallback6,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo11,
   useRef as useRef13,
@@ -5794,7 +5971,7 @@ function ListViewInner({
     );
     return [checkboxColumn, ...dataColumns].filter(Boolean).join(" ");
   }, [columns, showCheckBox]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!resolvedActiveRowId) {
       return;
     }
@@ -5988,7 +6165,7 @@ var ListView = forwardRef2(ListViewInner);
 
 // src/components/MaskedField/MaskedField.tsx
 import {
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useId as useId7,
   useMemo as useMemo12,
   useRef as useRef14,
@@ -6194,7 +6371,7 @@ function MaskedField({
     () => props.inputMode === void 0 ? getTextMaskInputMode(mask) : void 0,
     [mask, props.inputMode]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     if (!onDebouncedChange) {
       return;
     }
@@ -7202,7 +7379,7 @@ function ReportCell({
 
 // src/components/SearchBox/SearchBox.tsx
 import {
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useId as useId12,
   useMemo as useMemo15,
   useRef as useRef17,
@@ -7279,7 +7456,7 @@ function SearchBox({
   );
   const popupRoot = typeof document === "undefined" ? null : resolveSearchBoxPortalRoot();
   const [themePortalStyle, setThemePortalStyle] = useState25(() => void 0);
-  useEffect12(() => {
+  useEffect13(() => {
     if (disabled) {
       return;
     }
@@ -7311,7 +7488,7 @@ function SearchBox({
     popupRef,
     portalRoot: popupRoot
   });
-  useEffect12(() => {
+  useEffect13(() => {
     if (disabled || !open) {
       return;
     }
@@ -7693,7 +7870,7 @@ function SpinBox({
 
 // src/components/Splitter/Splitter.tsx
 import {
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   useId as useId14,
   useRef as useRef18,
   useState as useState27
@@ -7742,13 +7919,13 @@ function Splitter({
   );
   const firstPaneId = useId14();
   const secondPaneId = useId14();
-  useEffect13(() => {
+  useEffect14(() => {
     if (!storageKey || typeof window === "undefined") {
       return;
     }
     window.localStorage.setItem(storageKey, String(activeValue));
   }, [activeValue, storageKey]);
-  useEffect13(() => {
+  useEffect14(() => {
     return () => {
       if (dragFrameRef.current !== null) {
         window.cancelAnimationFrame(dragFrameRef.current);
@@ -7897,7 +8074,7 @@ function Splitter({
 
 // src/components/TickBar/TickBar.tsx
 import {
-  useEffect as useEffect14,
+  useEffect as useEffect15,
   useId as useId15,
   useMemo as useMemo17,
   useRef as useRef19,
@@ -7963,7 +8140,7 @@ function TickBar({
     );
   }, [min, safeMax, safeStep, tickCount]);
   const renderedValue = valueRenderer ? valueRenderer(resolvedValue, min, safeMax) : String(resolvedValue);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!dragging) {
       return;
     }
@@ -8279,7 +8456,7 @@ function ToolSeparator({ className, ...props }) {
 import {
   forwardRef as forwardRef3,
   useCallback as useCallback7,
-  useEffect as useEffect15,
+  useEffect as useEffect16,
   useId as useId16,
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo18,
@@ -8648,7 +8825,7 @@ function TreeViewInner({
   const resolvedSelectedId = derivedSelectedId && selectableItems.some((entry) => entry.itemId === derivedSelectedId) ? derivedSelectedId : selectableItems[0]?.itemId ?? null;
   const [activeId, setActiveId] = useState29(resolvedSelectedId);
   const resolvedActiveId = activeId && selectableItems.some((entry) => entry.itemId === activeId) ? activeId : resolvedSelectedId;
-  useEffect15(() => {
+  useEffect16(() => {
     if (!resolvedActiveId) {
       return;
     }
@@ -8895,7 +9072,7 @@ var TreeView = forwardRef3(TreeViewInner);
 import {
   forwardRef as forwardRef4,
   useCallback as useCallback8,
-  useEffect as useEffect16,
+  useEffect as useEffect17,
   useId as useId17,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect5,
@@ -9042,6 +9219,7 @@ function TreeListViewRowInner({
   item,
   onActivateItem,
   onDoubleClickItem,
+  onPopupMenuItem,
   onToggleItemCheck,
   onToggleItemExpanded,
   originOffset,
@@ -9080,6 +9258,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) {
@@ -9113,6 +9302,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",
@@ -9261,6 +9451,7 @@ function TreeListViewRowInner({
         item: child,
         onActivateItem,
         onDoubleClickItem,
+        onPopupMenuItem,
         onToggleItemCheck,
         onToggleItemExpanded,
         originOffset: originOffset + leadOffset,
@@ -9282,7 +9473,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 = memo5(
   TreeListViewRowInner,
@@ -9296,6 +9487,7 @@ function TreeListViewInner({
   checkedIds,
   className,
   columns,
+  onPopupMenu,
   data,
   dataVersion,
   defaultActiveItemId,
@@ -9372,7 +9564,7 @@ function TreeListViewInner({
     ),
     [visibleItems]
   );
-  useEffect16(() => {
+  useEffect17(() => {
     if (!resolvedActiveItemId) {
       return;
     }
@@ -9426,7 +9618,7 @@ function TreeListViewInner({
       return didChange ? nextWidths : currentWidths;
     });
   }, [columns, userColumnWidths, visibleItems]);
-  useEffect16(() => {
+  useEffect17(() => {
     return () => {
       if (resizeFrameRef.current !== null) {
         window.cancelAnimationFrame(resizeFrameRef.current);
@@ -9465,6 +9657,18 @@ function TreeListViewInner({
     },
     [onItemSelect, selectedId, updateActiveItem]
   );
+  const handleItemPopupMenu = useCallback8(
+    (event, item, context) => {
+      if (item.disabled || !onPopupMenu) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      activateEntry(item, item.id);
+      onPopupMenu(event, item, context);
+    },
+    [activateEntry, onPopupMenu]
+  );
   const activateResolvedItem = useCallback8(
     (itemId) => {
       if (!itemId) {
@@ -9770,6 +9974,7 @@ function TreeListViewInner({
             item,
             onActivateItem: activateEntry,
             onDoubleClickItem: onItemDoubleClick ? handleItemDoubleClick : void 0,
+            onPopupMenuItem: handleItemPopupMenu,
             onToggleItemCheck: handleItemCheckChange,
             onToggleItemExpanded: setExpandedState,
             originOffset: 0,
@@ -9811,10 +10016,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",
@@ -9847,10 +10054,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",
@@ -9883,10 +10092,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",
@@ -9919,10 +10130,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",
@@ -9955,10 +10168,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",
@@ -10002,10 +10217,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,
@@ -10089,6 +10306,7 @@ function NuThemeProvider({
   onFontFamilyChange,
   onFontSizeChange,
   onThemeChange,
+  style,
   theme
 }) {
   const generatedId = useId18();
@@ -10174,7 +10392,8 @@ function NuThemeProvider({
         ...getNuThemeStyle(resolvedTheme),
         "--nu-font-body": resolvedFontFamily,
         fontFamily: resolvedFontFamily,
-        fontSize: `${resolvedFontSize}px`
+        fontSize: `${resolvedFontSize}px`,
+        ...style
       },
       children: [
         crtGlitch ? /* @__PURE__ */ jsx61(NuCrtGlitch, { ...typeof crtGlitch === "object" ? crtGlitch : {} }) : null,