@deadragdoll/reactnu 0.1.30 → 0.1.52

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;
@@ -3570,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);
@@ -3667,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;

package/docs/API_REFERENCE.md

@@ -21,6 +21,10 @@ See: [Slot Customization](./SLOT_CUSTOMIZATION.md)
 
 - `NuThemeProvider`
   docs: [NuThemeProvider](./NuThemeProvider.md)
+- `NuDragDropProvider`
+  coordinates application-owned transfers among `NuIconGrid`, `ListBox`, and
+  `TreeListView`
+  docs: [NuDragDropProvider](./NuDragDropProvider.md)
 - `NuDesktop`
   docs: [Desktop](./Desktop.md)
 - `Dashboard`
@@ -41,6 +45,9 @@ See: [Slot Customization](./SLOT_CUSTOMIZATION.md)
   also exposes `showMessageBox(...)` and `showInputBox(...)`
 - `useNuIconManager()`
   manages icons inside a `NuIconProvider`
+- `useNuDragDrop()`
+  internal integration hook for custom shared drag sources and targets; most
+  applications should use component props from [Shared Drag and Drop](./NuDragDropProvider.md)
 - `usePopupMenu()`
   anchor/open helper for `PopupMenu`
 - `useWindowMenu()`
@@ -91,6 +98,8 @@ See: [Slot Customization](./SLOT_CUSTOMIZATION.md)
   docs: [TreeView](./TreeView.md)
 - `TreeListView`
   docs: [TreeListView](./TreeListView.md)
+- Shared drag-and-drop contract
+  docs: [NuDragDropProvider](./NuDragDropProvider.md)
 
 ## Layout And Surfaces
 

package/docs/COMPONENT_INDEX.md

@@ -8,6 +8,7 @@
 - [Contributor Guide](./CONTRIBUTOR_GUIDE.md)
 - [Slot Customization](./SLOT_CUSTOMIZATION.md)
 - [Storybook](./STORYBOOK.md)
+- [Shared Drag and Drop](./NuDragDropProvider.md)
 
 ## Core Components
 
@@ -57,6 +58,7 @@
 
 ## Providers
 
+- [NuDragDropProvider](./NuDragDropProvider.md)
 - [NuThemeProvider](./NuThemeProvider.md)
 - [NuAppHostProvider](./NuAppHostProvider.md)
 

package/docs/GETTING_STARTED.md

@@ -49,7 +49,8 @@ export function App() {
 ## Recommended Order
 
 1. `NuThemeProvider`
-2. `NuDesktop`
+2. `NuDragDropProvider` when ListBox, TreeListView, or IconGrid need to exchange items
+3. `NuDesktop`
 3. host-driven `appBar`
 4. workspace content
 5. open windows through `useNuWindowManager()`

package/docs/IconGrid.md

@@ -61,6 +61,21 @@ 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`.
+- Within `NuDragDropProvider`, use `acceptsDrop(item)` and `onDrop(item,
+  context)` to accept application-defined items from `ListBox` or
+  `TreeListView`. `onDragOut(item)` runs when an icon is accepted by one of
+  those non-icon targets. The existing `accepts(icon)` API remains specific to
+  icon-to-icon transfers.
 
 `useNuIconManager()`
 
@@ -70,12 +85,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,11 @@
 - `checkedIds?: string[]`
 - `onItemCheckChange?: (item, group, checked) => void`
 - `onItemDoubleClick?: (item, group) => void`
+- `onPopupMenu?: (event, item, group) => void`
+- `getDragItem?: (item, group) => NuDragDropItem | false`
+- `onItemDragOut?: (item, group) => void`
+- `acceptsDrop?: (item) => boolean`
+- `onDrop?: (item, context) => boolean | void`
 - `rightCheckBox?: boolean`
 - `emptyText?: string`
 
@@ -33,3 +38,9 @@
 ## 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.
+- Inside `NuDragDropProvider`, `getDragItem` makes rows draggable. The
+  application decides accepted data in `acceptsDrop` and updates its collection
+  in `onDrop` / `onItemDragOut`.

package/docs/NuDragDropProvider.md

@@ -0,0 +1,43 @@
+# NuDragDropProvider
+
+`NuDragDropProvider` coordinates pointer drag-and-drop between `NuIconGrid`,
+`ListBox`, and `TreeListView`. It carries an application-defined item; it does
+not mutate the host application's list or tree data.
+
+```tsx
+<NuDragDropProvider>
+  <ListBox
+    data={receivers}
+    getDragItem={(item, group) => ({
+      type: "receiver",
+      id: String(item.id),
+      data: { group: group.category?.text ?? "ungrouped", receiver: item }
+    })}
+    onItemDragOut={(item) => removeReceiver(String(item.id))}
+  />
+  <TreeListView
+    acceptsDrop={(drag) => drag.type === "receiver"}
+    columns={columns}
+    data={groups}
+    onDrop={(drag) => {
+      assignReceiverToSelectedGroup(drag.data);
+    }}
+  />
+</NuDragDropProvider>
+```
+
+## Contract
+
+- A source uses `getDragItem` to opt a displayed item into dragging. Return a
+  stable `type`, an ID, and any host payload in `data`.
+- A target uses `acceptsDrop(item)` to filter drag item types and `onDrop` to
+  perform its own state update. Returning `false` rejects the transfer.
+- `onItemDragOut` / `onDragOut` run only after a target accepted the item;
+  remove or update the source data there.
+- `NuIconGrid` keeps `accepts(icon)`, `onIconDrop`, and `onIconMoveOut` for
+  its existing icon-to-icon transfer. Its `acceptsDrop` and `onDrop` receive
+  non-icon shared drag items.
+
+Wrap every source and target that should interact in the same provider. A
+fallback coordinator preserves existing unwrapped IconGrid transfers, but a
+provider gives the application an explicit DnD scope.

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:
 
@@ -61,7 +63,7 @@ Supported props:
 
 - 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.
+- `midnight` is a dark slate-blue palette with blue chrome and a burnt-orange focus accent.
 - `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/TreeListView.md

@@ -54,6 +54,11 @@ const columns: TreeListColumn<Node>[] = [
 - `defaultExpandedIds`
 - `onItemSelect`
 - `onItemDoubleClick`
+- `onPopupMenu`
+- `getDragItem`
+- `onItemDragOut`
+- `acceptsDrop`
+- `onDrop`
 - `onItemCheckChange`
 - `onExpandedIdsChange`
 - `onActiveItemChange`
@@ -82,3 +87,10 @@ 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.
+- Inside `NuDragDropProvider`, rows may produce shared drag items through
+  `getDragItem`; the host filters and applies incoming items with
+  `acceptsDrop` and `onDrop`.

package/package.json

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