@deadragdoll/reactnu 0.1.52 → 0.1.73

package/dist/styles.css

@@ -20,6 +20,8 @@
   --nu-color-button-face-alt: #c7c7c7;
   --nu-color-button-danger: #c84d4d;
   --nu-color-button-success: #188f3b;
+  --nu-text-danger: #c84d4d;
+  --nu-text-success: #188f3b;
   --nu-color-button-text: #000000;
   --nu-color-field-bg: #000000;
   --nu-color-field-text: #ffffff;
@@ -47,10 +49,22 @@
   --nu-button-press-depth-y: 0.1em;
   --nu-frame-thickness: 2px;
   --nu-rule-thickness: 1px;
+  --nu-toolbar-background: var(--nu-color-panel);
+  --nu-toolbar-inset: 0.2ch;
+  --nu-toolbar-border-color: var(--nu-border-dark);
+  --nu-toolbar-border-style: solid;
+  --nu-toolbar-border-width: var(--nu-rule-thickness);
+  --nu-toolbar-separator-color: var(--nu-border-dark);
+  --nu-toolbar-separator-style: solid;
+  --nu-toolbar-separator-width: var(--nu-rule-thickness);
+  --nu-menu-divider-color: var(--nu-border-dark);
+  --nu-menu-divider-style: solid;
+  --nu-menu-divider-width: var(--nu-rule-thickness);
   --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-icon-width: 1em;
   --nu-window-title-height: calc(1em + 3px);
   --nu-window-status-height: 1.35rem;
   --nu-window-inactive-overlay: rgba(0, 0, 0, 0.22);
@@ -1085,20 +1099,23 @@
 .nu-main-menu__item-button:disabled {
   cursor: default;
 }
-.nu-main-menu__item--root .nu-main-menu__item-button {
+.nu-main-menu__item--root > .nu-main-menu__item-button {
   display: inline-flex;
   align-items: center;
   min-height: 1.4rem;
   padding: 0 0.65rem;
 }
 .nu-main-menu__item--submenu .nu-main-menu__item-button {
-  grid-template-columns: 1.1rem 1fr auto 0.8rem;
+  grid-template-columns: minmax(max-content, 1fr) max-content 0.8rem;
   gap: 0.45rem;
   width: 100%;
   min-width: 13rem;
   min-height: 1.35rem;
   padding: 0 0.55rem;
 }
+.nu-main-menu__item--submenu .nu-main-menu__item-button[data-has-leading] {
+  grid-template-columns: auto minmax(max-content, 1fr) max-content 0.8rem;
+}
 .nu-main-menu__item--open > .nu-main-menu__item-button {
   background: var(--nu-color-field-bg);
   color: var(--nu-text-primary);
@@ -1146,14 +1163,23 @@
   top: calc(100% - 1px);
   left: 0;
 }
+.nu-main-menu__submenu-shell--root[data-open-left] {
+  right: 0;
+  left: auto;
+}
 .nu-main-menu__submenu-shell--submenu {
   top: -0.2rem;
   left: calc(100% - 1px);
 }
+.nu-main-menu__submenu-shell--submenu[data-open-left] {
+  right: calc(100% - 1px);
+  left: auto;
+}
 .nu-main-menu__divider {
-  height: 1px;
+  height: 0;
   margin: 0.18rem 0.55rem;
-  background: var(--nu-border-dark);
+  border-block-start: var(--nu-menu-divider-width) var(--nu-menu-divider-style)
+    var(--nu-menu-divider-color);
 }
 .nu-main-menu__check {
   display: inline-flex;
@@ -1163,6 +1189,13 @@
   block-size: var(--nu-glyph-cell-size);
   color: var(--nu-text-hotkey);
 }
+.nu-main-menu__leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  grid-column: 1;
+}
 .nu-main-menu__check-box {
   display: inline-flex;
   align-items: center;
@@ -1175,24 +1208,49 @@
 .nu-main-menu__check-box[data-unchecked-shape="none"] {
   border-color: transparent;
 }
+.nu-main-menu__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--nu-glyph-cell-size);
+  block-size: var(--nu-glyph-cell-size);
+  color: currentColor;
+}
+.nu-main-menu__icon > svg {
+  inline-size: var(--nu-glyph-cell-size);
+  block-size: var(--nu-glyph-cell-size);
+}
 .nu-main-menu__label {
   min-width: 0;
+  grid-column: 1;
+}
+.nu-main-menu__item-button[data-has-leading] .nu-main-menu__label {
+  grid-column: 2;
 }
 .nu-main-menu__hotkey {
   color: var(--nu-text-hotkey);
 }
 .nu-main-menu__shortcut {
+  grid-column: 2;
+  justify-self: end;
   margin-left: 1rem;
   color: var(--nu-main-menu-text);
 }
+.nu-main-menu__item-button[data-has-leading] .nu-main-menu__shortcut {
+  grid-column: 3;
+}
 .nu-main-menu__item--open .nu-main-menu__shortcut,
 .nu-main-menu__item:not(.nu-main-menu__item--disabled):hover
   .nu-main-menu__shortcut {
   color: currentColor;
 }
 .nu-main-menu__submenu-arrow {
+  grid-column: 3;
   justify-self: end;
 }
+.nu-main-menu__item-button[data-has-leading] .nu-main-menu__submenu-arrow {
+  grid-column: 4;
+}
 .nu-masked-field {
   display: grid;
   gap: var(--nu-space-xs);
@@ -1798,10 +1856,10 @@
   color: var(--nu-text-accent);
 }
 .nu-report-cell--danger {
-  color: var(--nu-text-hotkey);
+  color: var(--nu-text-danger);
 }
 .nu-report-cell--success {
-  color: var(--nu-text-primary);
+  color: var(--nu-text-success);
 }
 .nu-search-box {
   display: grid;
@@ -1890,6 +1948,13 @@
   color: var(--nu-text-muted);
   font-size: 0.75rem;
 }
+.nu-spacer {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
 .nu-spin-box {
   display: grid;
   gap: var(--nu-space-xs);
@@ -2378,7 +2443,11 @@
   gap: 0.5ch;
   min-width: 0;
   min-height: 0;
-  padding: 0.2ch 0;
+  overflow: clip;
+  padding: var(--nu-toolbar-inset);
+  border: var(--nu-toolbar-border-width) var(--nu-toolbar-border-style)
+    var(--nu-toolbar-border-color);
+  background: var(--nu-toolbar-background);
   font-family: var(--nu-font-body);
 }
 .nu-toolbar[data-fill] {
@@ -2424,6 +2493,16 @@
   opacity: 0.6;
   cursor: not-allowed;
 }
+.nu-toolbar__static {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+.nu-toolbar__static > svg {
+  inline-size: var(--nu-glyph-cell-size);
+  block-size: var(--nu-glyph-cell-size);
+}
 .nu-toolbar__button-icon,
 .nu-toolbar__button-caret {
   display: inline-flex;
@@ -2439,10 +2518,11 @@
   padding-left: 0.55ch;
 }
 .nu-toolbar__separator {
-  width: 1px;
+  width: 0;
   align-self: stretch;
   margin: 0 0.35ch;
-  background: var(--nu-border-dark);
+  border-inline-start: var(--nu-toolbar-separator-width)
+    var(--nu-toolbar-separator-style) var(--nu-toolbar-separator-color);
 }
 .nu-toolbar[data-wrap] .nu-toolbar__separator {
   min-height: 1em;
@@ -3520,7 +3600,8 @@
   align-items: center;
   justify-content: center;
   min-height: var(--nu-window-title-height);
-  padding: 0 var(--nu-window-title-controls-width) 0 0.45rem;
+  padding: 0 var(--nu-window-title-controls-width) 0
+    calc(0.45rem + var(--nu-window-title-icon-width));
   background: var(--nu-color-title-bg);
   color: var(--nu-color-title-text);
   line-height: 1;
@@ -3534,6 +3615,24 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.nu-window__title-icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0.35rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--nu-window-title-icon-width);
+  overflow: hidden;
+  color: inherit;
+}
+.nu-window__title-icon > svg,
+.nu-window__title-icon > img {
+  display: block;
+  max-width: 100%;
+  max-height: calc(var(--nu-window-title-height) - 2px);
+}
 .nu-window__title-controls {
   position: absolute;
   top: 0;
@@ -3726,6 +3825,16 @@ button.nu-app-bar-item:focus-visible {
   outline: none;
   box-shadow: none;
 }
+.nu-window-bar__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  inline-size: var(--nu-glyph-cell-size);
+  block-size: var(--nu-glyph-cell-size);
+  margin-inline-end: 0.6ch;
+  color: inherit;
+}
 .nu-app-bar-host {
   position: absolute;
   right: 0;

package/dist/windowing/AppBarItem.d.ts

@@ -15,7 +15,7 @@ type AppBarItemStaticProps = AppBarItemBaseProps & Omit<HTMLAttributes<HTMLDivEl
 export type AppBarItemProps = AppBarItemButtonProps | AppBarItemStaticProps;
 export declare function AppBarItem(props: AppBarItemProps): import("react").DetailedReactHTMLElement<{
     className: string;
-    type: "button" | "submit" | "reset";
+    type: "button" | "reset" | "submit";
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;

package/dist/windowing/WindowBar.d.ts

@@ -1,7 +1,9 @@
+import { ReactNode } from "react";
 export type WindowBarItem = {
     active?: boolean;
     domain?: string;
     id: string;
+    icon?: ReactNode;
     minimized?: boolean;
     title: string;
 };

package/dist/windowing/windowing.types.d.ts

@@ -11,6 +11,10 @@ export type NuManagedWindowSnapshot = {
     width?: number;
 };
 export type NuManagedWindowDefinition = {
+    /** Windows with the same value share their active/inactive chrome state. */
+    activationGroup?: string;
+    /** Locks pointer resizing to this width / height ratio and disables maximize. */
+    aspectRatio?: number;
     appModal?: boolean;
     bodyClassName?: string;
     border?: WindowBorder;
@@ -18,7 +22,13 @@ export type NuManagedWindowDefinition = {
     closeable?: boolean;
     content: ReactNode | ((controls: NuManagedWindowControls) => ReactNode);
     domain?: string;
+    /** Decorative visual rendered in the fixed left title-bar slot. */
+    icon?: ReactNode;
     maximizable?: boolean;
+    /** Minimum rendered height and resize bound for this window. */
+    minHeight?: CSSProperties["minHeight"];
+    /** Minimum rendered width and resize bound for this window. */
+    minWidth?: CSSProperties["minWidth"];
     modal?: boolean | string;
     minimizable?: boolean;
     mode?: WindowMode;

package/docs/API_REFERENCE.md

@@ -115,6 +115,8 @@ See: [Slot Customization](./SLOT_CUSTOMIZATION.md)
   docs: [Splitter](./Splitter.md)
 - `Stack`
   docs: [Stack](./Stack.md)
+- `Spacer`
+  docs: [Spacer](./Spacer.md)
 - `ToolBar`, `ToolButton`, `ToolSeparator`
   docs: [ToolBar](./ToolBar.md)
 

package/docs/COMPONENT_INDEX.md

@@ -35,6 +35,7 @@
 - [ReportCell](./ReportCell.md)
 - [SearchBox](./SearchBox.md)
 - [SpinBox](./SpinBox.md)
+- [Spacer](./Spacer.md)
 - [Stack](./Stack.md)
 - [Splitter](./Splitter.md)
 - [TextField](./TextField.md)

package/docs/MainMenu.md

@@ -18,6 +18,7 @@
 - `MainMenuItem`
   - `id`
   - `text`
+  - `icon?: ReactNode` — decorative icon in a popup menu row
   - `hotkey?`
   - `shortcut?`
   - `checked?`
@@ -28,9 +29,19 @@
 - `MainMenuDivider`
   - `id`
   - `type: "divider"`
+- `MainMenuSpacer`
+  - `id`
+  - `type: "spacer"`
+  - Valid at the root level only; pushes following menu items to the right.
 
 ## Notes
 
 - Top-level dropdowns open below their root items.
-- Nested submenus open to the right.
+- Nested submenus open to the right by default and automatically open to the
+  left only when their right edge would leave the viewport.
 - Active and hovered items use the same black selection pattern used elsewhere in the library.
+- Popup-menu dividers use `--nu-menu-divider-color`,
+  `--nu-menu-divider-style`, and `--nu-menu-divider-width`.
+- Use `{ id: "main-menu-spacer", type: "spacer" }` between root menu items to
+  align the following menu group to the opposite edge. Their dropdowns choose
+  the viewport-facing side when opened.

package/docs/NuWindowProvider.md

@@ -50,6 +50,78 @@ windowManager.openWindow({
 });
 ```
 
+## Title Icons
+
+`openWindow(...)` and `openDialog(...)` accept `icon?: ReactNode`. It renders in
+the fixed left title-bar slot, so managed dialogs use the same chrome as regular
+windows. The same icon is reused in the minimized AppBar item, the MDI
+`Window` menu, and the `Pick...` dialog.
+
+```tsx
+windowManager.openDialog({
+  content: <NetworkSettings />,
+  icon: <NuGlyph name="gear" />,
+  title: "Network settings"
+});
+```
+
+## Fixed Aspect Ratio
+
+Set a positive `aspectRatio` (width / height) for image, video, map, or other
+fixed-ratio content. Pointer resizing keeps the ratio, combines `minWidth` and
+`minHeight` into a ratio-consistent minimum, and disables maximizing the
+managed window.
+
+```tsx
+windowManager.openWindow({
+  aspectRatio: 178 / 704,
+  content: <VirtualRemote />,
+  minWidth: "11rem",
+  style: { height: "50rem", width: "13rem" },
+  title: "Remote"
+});
+```
+
+## Linked Activation
+
+Set the same `activationGroup` on managed windows that represent one logical
+workspace. Activating either one gives every visible member of that group the
+active window chrome. Activating a window outside the group makes all members
+inactive again. This only links activation visuals; it does not dock, move, or
+resize the windows together.
+
+```tsx
+windowManager.openWindow({
+  activationGroup: "receiver-42",
+  content: <ReceiverOverview />,
+  title: "Receiver overview"
+});
+
+windowManager.openWindow({
+  activationGroup: "receiver-42",
+  content: <ReceiverDiagnostics />,
+  title: "Receiver diagnostics"
+});
+```
+
+App-modal dialogs remain the sole active surface while open, regardless of an
+activation group.
+
+## Size Limits
+
+Managed windows accept `minWidth` and `minHeight` directly. They override the
+provider's default minimum width (`26rem` for a window and `22rem` for a
+dialog) and constrain pointer resizing as well as CSS layout.
+
+```tsx
+windowManager.openWindow({
+  content: <CompactLog />,
+  minHeight: "10rem",
+  minWidth: "18rem",
+  title: "Compact log"
+});
+```
+
 ## Helper Dialogs
 
 The same manager also provides async helper dialogs:

package/docs/PopupMenu.md

@@ -40,6 +40,8 @@ const popupMenu = usePopupMenu();
 ## Notes
 
 - Popup menus render through a portal and are not clipped by local overflow containers.
+- Nested popup-menu levels open to the right by default and flip left only when
+  they would overflow the viewport.
 - `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/Spacer.md

@@ -0,0 +1,41 @@
+# Spacer
+
+`Spacer` fills unused space in a flex layout, moving all following controls to
+the opposite edge. It is decorative and is hidden from assistive technology.
+
+## Usage
+
+```tsx
+<ToolBar>
+  <ToolButton>&Open</ToolButton>
+  <Spacer />
+  <ToolButton>&Help</ToolButton>
+</ToolBar>
+```
+
+It works in `ToolBar`, `Stack direction="row"`, and a window `statusBar`:
+
+```tsx
+<Window
+  statusBar={
+    <>
+      <StatusBarItem>F2 Save</StatusBarItem>
+      <Spacer />
+      <StatusBarItem>Ready</StatusBarItem>
+    </>
+  }
+  title="Editor"
+/>
+```
+
+For a root `MainMenu`, use the menu model equivalent:
+
+```tsx
+const items: MainMenuNode[] = [
+  { id: "file", text: "&File" },
+  { id: "window", text: "&Window" },
+  { id: "menu-spacer", type: "spacer" },
+  { id: "profile", text: "&Profile" },
+  { id: "about", text: "&About" }
+];
+```

package/docs/StatusBarItem.md

@@ -29,3 +29,4 @@
 - `StatusBarItem` is layout-only.
 - It does not render its own border or segmented chrome.
 - The host controls the visual content inside the item.
+- Insert `Spacer` between items to pin the following status controls to the end.

package/docs/TOKEN_CHECKLIST.md

@@ -61,6 +61,15 @@ If a component needs a new reusable visual value, add it there first instead of
   - `--nu-control-height`
   - `--nu-frame-thickness`
   - `--nu-rule-thickness`
+- Toolbar and menu dividers:
+  - `--nu-toolbar-background`
+  - `--nu-toolbar-inset`
+  - `--nu-toolbar-border-color`, `--nu-toolbar-border-style`,
+    `--nu-toolbar-border-width`
+  - `--nu-toolbar-separator-color`, `--nu-toolbar-separator-style`,
+    `--nu-toolbar-separator-width`
+  - `--nu-menu-divider-color`, `--nu-menu-divider-style`,
+    `--nu-menu-divider-width`
 - Button mechanics:
   - `--nu-button-shadow-x`
   - `--nu-button-shadow-y`

package/docs/ToolBar.md

@@ -7,12 +7,13 @@ For the same button behavior outside a toolbar container, use [CommandButton](./
 ## Usage
 
 ```tsx
-<ToolBar>
+<ToolBar startContent={<NuGlyph aria-hidden name="folder" />}>
   <ToolButton icon="folder">&Scan</ToolButton>
   <ToolButton icon="star" pressed>
     &Watch
   </ToolButton>
   <ToolSeparator />
+  <Spacer />
   <ToolDropButton
     icon="folder"
     menuItems={[
@@ -32,20 +33,32 @@ For the same button behavior outside a toolbar container, use [CommandButton](./
 - `ToolButton`
 - `ToolDropButton`
 - `ToolSeparator`
+- `Spacer`
 
 ## Key Props
 
 - `fill?: boolean`
 - `wrap?: boolean`
+- `startContent?: ReactNode`
+- `endContent?: ReactNode`
 - `slotStyles`
 - `slotClassNames`
 
 ## Notes
 
-- `ToolBar` is layout-only and defaults to `fill={true}`.
+- `ToolBar` defaults to `fill={true}` and uses `--nu-toolbar-background` for
+  its surface.
+- `startContent` and `endContent` render static React content before and after
+  the controls. Use them for decorative icons or compact status text, not for
+  actions that need toolbar keyboard semantics.
 - `wrap={true}` lets tools continue on the next row when the container is too narrow.
 - `ToolButton` supports `toggled` for toggle-style tools. `pressed` is kept as a legacy alias through the shared command-button layer.
 - `ToolButton` also supports `icon` and optional `dropdown`.
 - `ToolDropButton` is a convenience wrapper for `ToolButton dropdown`.
 - If `menuItems` are provided, `ToolDropButton` opens `PopupMenu` automatically and reports selection through `onMenuItemSelect`.
 - `ToolSeparator` is decorative and should only be used between tools.
+- Toolbar chrome is themeable through `--nu-toolbar-border-color`,
+  `--nu-toolbar-border-style`, and `--nu-toolbar-border-width`; separators
+  use the corresponding `--nu-toolbar-separator-*` tokens.
+- `--nu-toolbar-inset` controls Toolbar padding on all four sides.
+- `Spacer` fills free space and moves following tools to the opposite edge.

package/docs/Window.md

@@ -12,6 +12,7 @@
 
 ```tsx
 <Window
+  icon={<NuGlyph name="folder" />}
   title="Activity Log"
   mode="window"
   statusBar={
@@ -30,11 +31,16 @@
 - `title: string`
 - `mode?: "dialog" | "window"`
 - `border?: "single" | "double"`
+- `icon?: ReactNode` — decorative visual in the fixed left title-bar slot
 - `minimized?: boolean`
 - `maximized?: boolean`
 - `closeable?: boolean`
 - `draggable?: boolean`
 - `resizable?: boolean`
+- `aspectRatio?: number` — positive width / height ratio; locks pointer resize
+  and suppresses the maximize control
+- `minWidth?: number | string` — defaults to `240px` for a standalone window
+- `minHeight?: number | string` — defaults to `120px` for a standalone window
 - `scrollable?: boolean`
 - `statusBar?: ReactNode`
 - `titleButtons?: WindowTitleButtonDefinition[]`
@@ -45,9 +51,22 @@
 - `onSizeChange?(size)`
 - `onActivate?()`
 
+`activationGroup?: string` is available on a managed window definition passed
+to `useNuWindowManager().openWindow(...)`; it is resolved by
+`NuWindowProvider`, rather than by a standalone `Window` instance. See
+[NuWindowProvider](./NuWindowProvider.md#linked-activation).
+
 ## Notes
 
 - Drag and resize are implemented with pointer events and local DOM updates for smoother motion.
 - The public `WindowTitleButton` and `useWindowTitleButtons()` helpers support custom title-bar controls.
+- The left title-bar slot is always reserved. Pass `icon` to show a `NuGlyph`,
+  Font Awesome icon, SVG, or another React node without shifting the title.
 - `StatusBarItem` only provides placement semantics (`grow`, `align`) and does not enforce its own border or chrome.
 - Plain string `statusBar` still works for simple status lines.
+- `minWidth` and `minHeight` are applied as CSS limits and as the lower bounds
+  for pointer resizing. A managed window may also specify them in its
+  `openWindow(...)` definition.
+- With `aspectRatio`, resizing follows whichever pointer axis has the greater
+  ratio-adjusted movement. The other dimension is derived from the ratio, and
+  the effective minimum remains ratio-consistent.

package/docs/WindowBar.md

@@ -17,8 +17,11 @@
 - Marks the active window
 - Groups windows by `domain`
 - Opens a picker dialog when a grouped domain is clicked
+- Shows each managed window's `icon` beside its title; grouped entries use the
+  active window's icon when one is available
 
 ## Notes
 
 - Grouping is driven by `NuManagedWindowDefinition.domain`.
 - Grouped pickers use the shared MDI-style window picker dialog logic.
+- The MDI `Window` menu and `Pick...` dialog reuse the same managed-window icon.

package/package.json

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