@deadragdoll/reactnu 0.1.24 → 0.1.49

package/dist/styles.css

@@ -8,10 +8,12 @@
   --nu-color-panel: #6262e3;
   --nu-color-panel-inset: #6262e3;
   --nu-color-title-bg: #ffffff;
+  --nu-color-menu: #ffffff;
   --nu-color-title-text: #1f36bc;
   --nu-text-primary: #ffffff;
   --nu-text-muted: #dfe3ff;
   --nu-text-inverse: #000000;
+  --nu-main-menu-text: #000000;
   --nu-text-accent: #ffff55;
   --nu-text-hotkey: #ff5555;
   --nu-color-button-face: #ffffff;
@@ -48,6 +50,9 @@
   --nu-window-shadow-bg: rgba(0, 0, 0, 0.38);
   --nu-window-shadow-offset-x: 1ch;
   --nu-window-shadow-offset-y: 1em;
+  --nu-window-title-controls-width: 7.8ch;
+  --nu-window-title-height: calc(1em + 3px);
+  --nu-window-status-height: 1.35rem;
   --nu-window-inactive-overlay: rgba(0, 0, 0, 0.22);
   --nu-window-inactive-border: color-mix(
     in srgb,
@@ -55,10 +60,32 @@
     var(--nu-border-dark)
   );
   --nu-window-modal-backdrop: rgba(0, 0, 0, 0.32);
+  --nu-app-bar-height: 2.1rem;
+  --nu-app-bar-padding: 0.2rem 0.35rem;
   --nu-scrollbar-track: transparent;
   --nu-scrollbar-thumb: var(--nu-color-button-face);
   --nu-scrollbar-button-bg: var(--nu-color-button-face);
   --nu-scrollbar-button-size: 0.875rem;
+  --nu-icon-grid-icon-background: transparent;
+  --nu-icon-grid-icon-border-color: transparent;
+  --nu-icon-grid-icon-border-style: solid;
+  --nu-icon-grid-icon-opacity: 1;
+  --nu-icon-grid-icon-selected-background: var(--nu-color-title-bg);
+  --nu-icon-grid-icon-inactive-selected-background: color-mix(
+    in srgb,
+    var(--nu-icon-grid-icon-selected-background) 65%,
+    var(--nu-color-app-bg-alt)
+  );
+  --nu-icon-grid-icon-selected-border-color: var(--nu-focus-color);
+  --nu-icon-grid-icon-selected-border-style: solid;
+  --nu-icon-grid-icon-selected-opacity: 1;
+  --nu-icon-grid-icon-focus-background: var(--nu-color-title-bg);
+  --nu-icon-grid-icon-focus-border-color: var(--nu-focus-color);
+  --nu-icon-grid-icon-focus-border-style: solid;
+  --nu-icon-grid-icon-focus-opacity: 1;
+  --nu-icon-grid-icon-disabled-opacity: 0.6;
+  --nu-icon-grid-icon-drag-opacity: 0.35;
+  --nu-icon-grid-icon-drag-preview-opacity: 0.85;
   --nu-scrollbar-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8,2 1,12 15,12' fill='black'/%3E%3C/svg%3E");
   --nu-scrollbar-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='1,4 15,4 8,14' fill='black'/%3E%3C/svg%3E");
   --nu-scrollbar-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='2,8 12,1 12,15' fill='black'/%3E%3C/svg%3E");
@@ -559,7 +586,13 @@
   width: 6rem;
   height: 6rem;
   padding: 0.25rem;
-  border: 1px solid transparent;
+  border: 1px var(--nu-icon-grid-icon-border-style)
+    var(--nu-icon-grid-icon-border-color);
+  --nu-icon-grid-icon-current-background: var(--nu-icon-grid-icon-background);
+  --nu-icon-grid-icon-current-background-opacity: var(
+    --nu-icon-grid-icon-opacity
+  );
+  isolation: isolate;
   background: transparent;
   color: var(--nu-text-primary);
   font: inherit;
@@ -568,19 +601,43 @@
   cursor: default;
   touch-action: none;
 }
-.nu-icon-grid__icon:focus-visible,
+.nu-icon-grid__icon::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background: var(--nu-icon-grid-icon-current-background);
+  opacity: var(--nu-icon-grid-icon-current-background-opacity);
+  pointer-events: none;
+}
 .nu-icon-grid__icon[data-selected] {
-  border-color: var(--nu-border-light);
-  outline: 1px solid var(--nu-border-dark);
-  outline-offset: -3px;
-  background: var(--nu-color-title-bg);
+  --nu-icon-grid-icon-current-background: var(
+    --nu-icon-grid-icon-selected-background
+  );
+  --nu-icon-grid-icon-current-background-opacity: var(
+    --nu-icon-grid-icon-selected-opacity
+  );
+  border-color: var(--nu-icon-grid-icon-selected-border-color);
+  border-style: var(--nu-icon-grid-icon-selected-border-style);
+  color: var(--nu-text-inverse);
+}
+.nu-icon-grid__icon:focus {
+  --nu-icon-grid-icon-current-background: var(
+    --nu-icon-grid-icon-focus-background
+  );
+  --nu-icon-grid-icon-current-background-opacity: var(
+    --nu-icon-grid-icon-focus-opacity
+  );
+  border-color: var(--nu-icon-grid-icon-focus-border-color);
+  border-style: var(--nu-icon-grid-icon-focus-border-style);
   color: var(--nu-text-inverse);
 }
 .nu-icon-grid__icon[data-dragging] {
   z-index: 1;
+  opacity: var(--nu-icon-grid-icon-drag-opacity);
 }
 .nu-icon-grid__icon:disabled {
-  opacity: 0.6;
+  opacity: var(--nu-icon-grid-icon-disabled-opacity);
 }
 .nu-icon-grid__glyph {
   display: inline-flex;
@@ -609,6 +666,18 @@
   -webkit-line-clamp: 2;
   line-clamp: 2;
 }
+.nu-window:not([data-active]) .nu-icon-grid__icon[data-selected],
+.nu-window:not([data-active]) .nu-icon-grid__icon:focus {
+  --nu-icon-grid-icon-current-background: var(
+    --nu-icon-grid-icon-inactive-selected-background
+  );
+  --nu-icon-grid-icon-current-background-opacity: var(
+    --nu-icon-grid-icon-selected-opacity
+  );
+  border-color: var(--nu-icon-grid-icon-selected-border-color);
+  border-style: var(--nu-icon-grid-icon-selected-border-style);
+  color: var(--nu-text-inverse);
+}
 .nu-listbox {
   flex: 1 1 auto;
   align-self: stretch;
@@ -973,8 +1042,8 @@
   position: relative;
   z-index: 1100;
   min-width: 0;
-  background: var(--nu-color-title-bg);
-  color: var(--nu-text-inverse);
+  background: var(--nu-color-menu);
+  color: var(--nu-main-menu-text);
   font-family: var(--nu-font-body);
 }
 .nu-main-menu__bar {
@@ -1048,8 +1117,8 @@
   min-width: 13rem;
   padding: 0.2rem 0;
   border: 1px solid var(--nu-border-dark);
-  background: var(--nu-color-button-face);
-  color: var(--nu-text-inverse);
+  background: var(--nu-color-menu);
+  color: var(--nu-main-menu-text);
 }
 .nu-main-menu__popup--submenu {
   position: relative;
@@ -1100,10 +1169,11 @@
   justify-content: center;
   inline-size: var(--nu-glyph-cell-size);
   block-size: var(--nu-glyph-cell-size);
-  background: var(--nu-color-button-face);
+  border: 1px solid var(--nu-border-dark);
+  background: transparent;
 }
 .nu-main-menu__check-box[data-unchecked-shape="none"] {
-  background: transparent;
+  border-color: transparent;
 }
 .nu-main-menu__label {
   min-width: 0;
@@ -1113,7 +1183,7 @@
 }
 .nu-main-menu__shortcut {
   margin-left: 1rem;
-  color: var(--nu-text-inverse);
+  color: var(--nu-main-menu-text);
 }
 .nu-main-menu__item--open .nu-main-menu__shortcut,
 .nu-main-menu__item:not(.nu-main-menu__item--disabled):hover
@@ -3384,8 +3454,6 @@
   padding: var(--nu-space-lg);
 }
 .nu-window {
-  --nu-window-title-controls-width: 7.8ch;
-  --nu-window-title-height: calc(1em + 3px);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -3497,11 +3565,6 @@
   outline: none;
   box-shadow: none;
 }
-.nu-window__title-button--close {
-  background: var(--nu-color-title-bg);
-  border: 1px solid var(--nu-border-light);
-  color: var(--nu-text-inverse);
-}
 .nu-window__body {
   min-width: 0;
   min-height: 0;
@@ -3575,7 +3638,7 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--nu-space-md);
-  min-height: 1.35rem;
+  min-height: var(--nu-window-status-height);
   padding: 0 0.45rem;
   background: var(--nu-color-title-bg);
   color: var(--nu-color-title-text);
@@ -3672,8 +3735,8 @@ button.nu-app-bar-item:focus-visible {
   display: flex;
   align-items: center;
   gap: 0.35rem;
-  min-height: 2.1rem;
-  padding: 0.2rem 0.35rem;
+  min-height: var(--nu-app-bar-height);
+  padding: var(--nu-app-bar-padding);
   background: var(--nu-color-shell);
   box-shadow: inset 0 1px 0 var(--nu-border-light);
   pointer-events: auto;

package/dist/theme/NuThemeProvider.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { CSSProperties, PropsWithChildren } from "react";
 import { NuCrtGlitchProps } from "../components/CrtGlitch";
 import { NuDesktopPatternMode, NuThemeDefinition, NuThemeName } from "./themes";
 type NuThemeProviderProps = PropsWithChildren<{
@@ -20,7 +20,8 @@ type NuThemeProviderProps = PropsWithChildren<{
     onDesktopPatternModeChange?: (desktopPatternMode: NuDesktopPatternMode) => void;
     onFontFamilyChange?: (fontFamily: string) => void;
     onFontSizeChange?: (fontSize: number) => void;
+    style?: CSSProperties;
     theme?: NuThemeName | NuThemeDefinition;
 }>;
-export declare function NuThemeProvider({ children, className, crtGlitch, defaultDesktopPatternMode, defaultFontFamily, defaultFontSize, defaultTheme, desktopPatternMode, fontFamily, fontSize, onDesktopPatternModeChange, onFontFamilyChange, onFontSizeChange, onThemeChange, theme }: NuThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function NuThemeProvider({ children, className, crtGlitch, defaultDesktopPatternMode, defaultFontFamily, defaultFontSize, defaultTheme, desktopPatternMode, fontFamily, fontSize, onDesktopPatternModeChange, onFontFamilyChange, onFontSizeChange, onThemeChange, style, theme }: NuThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/theme/themes.d.ts

@@ -10,10 +10,12 @@ export type NuThemeTokens = {
     panelBackground: string;
     panelInsetBackground: string;
     titleBackground: string;
+    menuBackground: string;
     titleText: string;
     textPrimary: string;
     textMuted: string;
     textInverse: string;
+    mainMenuText: string;
     textAccent: string;
     textHotkey: string;
     buttonFace: string;
@@ -42,6 +44,7 @@ export declare const nuThemes: {
     readonly amber: NuThemeDefinition;
     readonly phosphor: NuThemeDefinition;
     readonly midnight: NuThemeDefinition;
+    readonly grayscale: NuThemeDefinition;
 };
 export type NuThemeName = keyof typeof nuThemes;
 export declare function isNuThemeName(value: string): value is NuThemeName;

package/docs/IconGrid.md

@@ -61,6 +61,16 @@ function Applications() {
 - `defaultArrangeMode="columns" | "rows" | "name"` arranges seeded icons
   once, after the grid measures a non-zero available area. This prevents icons
   from initially landing outside a bounded `Window`.
+- `dropTarget` makes a grid eligible as a non-interactive drop surface when it
+  sits behind other content. Pair it with `accepts(icon)` to filter incoming
+  icons before `onIconDrop` runs. This is useful for a full desktop target that
+  uses `pointer-events: none` and therefore does not interfere with the
+  desktop's own controls.
+- Drag an icon to another `NuIconGrid`, including one in a different managed
+  window, to transfer it between providers. `onIconDrop(icon, context)` runs on
+  the target first and may return `false` to reject the transfer;
+  `onIconMoveOut(icon, context)` runs on the source after a successful transfer.
+  `context` exposes both managers, grids, and the target `position`.
 
 `useNuIconManager()`
 
@@ -70,12 +80,24 @@ function Applications() {
 - `arrangeIcons("columns" | "rows" | "name")` lays out the current icons.
 
 Each icon can have `onClick`, `onDoubleClick`, `onContextMenu`,
-`onPositionChange`, and its own `contextMenuItems`.
+`onPositionChange`, its own `contextMenuItems`, and an application-defined
+`payload` that is preserved during a cross-grid transfer.
+
+## Theme tokens
+
+The default, selected, and focus IconGrid states each expose `background`,
+`border-color`, `border-style`, and `opacity` values under the
+`--nu-icon-grid-icon-*` prefix. The resting background defaults to
+`transparent`; those opacity values affect only the background fill. Drag,
+drag-preview, and disabled opacity also have dedicated
+tokens. In an inactive managed window, the selected border remains visible
+while `--nu-icon-grid-icon-inactive-selected-background` supplies a calmer
+fill.
 
 ## Interaction and accessibility
 
-- Drag icons to move them inside the grid; their resulting positions remain in
-  the provider for the lifetime of that provider.
+- Drag icons to move them inside the grid, or onto another icon grid to transfer
+  them. A duplicate ID or a non-grid target leaves the source icon in place.
 - A click selects an icon. Enter and Space activate its normal button action.
 - Right-click opens the icon menu; `Shift+F10` and the Context Menu key open it
   from the keyboard.

package/docs/ListBox.md

@@ -20,6 +20,7 @@
 - `checkedIds?: string[]`
 - `onItemCheckChange?: (item, group, checked) => void`
 - `onItemDoubleClick?: (item, group) => void`
+- `onPopupMenu?: (event, item, group) => void`
 - `rightCheckBox?: boolean`
 - `emptyText?: string`
 
@@ -33,3 +34,6 @@
 ## Notes
 
 - The same data format supports both grouped and flat lists by using `category: null`.
+- Right-clicking an enabled item activates it, prevents the browser context menu,
+  and calls `onPopupMenu`. Use the event coordinates to open an application-owned
+  `PopupMenu` or another contextual action surface.

package/docs/NuThemeProvider.md

@@ -47,6 +47,8 @@ Supported props:
 - `onFontSizeChange?: (fontSize) => void`
 - `crtGlitch?: boolean | NuCrtGlitchProps`
   enables the ambient CRT-glitch effect (see [CrtGlitch](./CrtGlitch.md)). `true` uses its defaults; pass an options object to tune them. Defaults to `false` — opt-in.
+- `style?: CSSProperties`
+  applies scoped CSS custom-property overrides after the resolved theme tokens. Popup portals mirror the computed values from the theme root.
 
 `useNuTheme()` exposes:
 
@@ -59,7 +61,9 @@ Supported props:
 
 ## Notes
 
-- Built-in themes are `classic` (default), `amber`, `phosphor`, and `midnight`.
+- Built-in themes are `classic` (default), `amber`, `phosphor`, `midnight`, and
+  `grayscale`.
 - `midnight` is a restrained dark blue-gray palette with pale chrome and yellow focus accents.
+- `grayscale` is a high-contrast monochrome monitor palette. Semantic button variants use brightness rather than hue.
 - Theme tokens drive desktop, windowing, controls, selection, and inactive overlays.
 - Provider typography affects preview content, managed windows, dialogs, menus, and popup portals rendered inside the theme scope.

package/docs/PopupMenu.md

@@ -32,7 +32,7 @@ const popupMenu = usePopupMenu();
   - `open`
   - `setOpen`
   - `close()`
-  - `openAtPoint(x, y)`
+  - `openAtPoint(x, y, themeSource?)`
   - `openAtElement(element)`
   - `openFromClick(event)`
   - `openFromContextMenu(event)`
@@ -40,3 +40,6 @@ const popupMenu = usePopupMenu();
 ## Notes
 
 - Popup menus render through a portal and are not clipped by local overflow containers.
+- `openFromContextMenu(event)` carries the event target into the portal, so
+  context menus inherit tokens from the nearest `NuThemeProvider`. Pass the
+  optional `themeSource` to `openAtPoint(...)` when opening one manually.

package/docs/TOKEN_CHECKLIST.md

@@ -97,7 +97,7 @@ If a component needs a new reusable visual value, add it there first instead of
 - Shadows:
   - If it is raised, is it reusing button/window shadow logic instead of inventing a new one?
 - Theme coverage:
-  - Would the component still read correctly in `classic`, `amber`, `phosphor`, and `midnight`?
+- Would the component still read correctly in `classic`, `amber`, `phosphor`, `midnight`, and `grayscale`?
 - Hardcoded values:
   - Are any colors or dimensions local only because they are truly component-specific?
 

package/docs/TreeListView.md

@@ -54,6 +54,7 @@ const columns: TreeListColumn<Node>[] = [
 - `defaultExpandedIds`
 - `onItemSelect`
 - `onItemDoubleClick`
+- `onPopupMenu`
 - `onItemCheckChange`
 - `onExpandedIdsChange`
 - `onActiveItemChange`
@@ -82,3 +83,7 @@ const columns: TreeListColumn<Node>[] = [
 - Columns auto-size from visible content by default.
 - `minWidth` sets a lower bound for auto-sized and resized columns.
 - Columns are resizable unless `resizable={false}` is set on a column.
+- Right-clicking an enabled row activates it and calls
+  `onPopupMenu(event, item, context)`. `context` has the same `depth`, `isLeaf`,
+  `item`, and `rowIndex` fields as `getCellContent`; the host owns rendering the
+  resulting menu.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deadragdoll/reactnu",
-  "version": "0.1.24",
+  "version": "0.1.49",
   "private": false,
   "description": "React components with a precise DOS-era utility interface.",
   "license": "MIT",