@deadragdoll/reactnu 0.1.52 → 0.1.56

package/dist/styles.css

@@ -51,6 +51,7 @@
   --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);
@@ -1092,7 +1093,7 @@
   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: 1.1rem var(--nu-glyph-cell-size) 1fr auto 0.8rem;
   gap: 0.45rem;
   width: 100%;
   min-width: 13rem;
@@ -1175,6 +1176,14 @@
 .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__label {
   min-width: 0;
 }
@@ -3520,7 +3529,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 +3544,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 +3754,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/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/MainMenu.md

@@ -18,6 +18,7 @@
 - `MainMenuItem`
   - `id`
   - `text`
+  - `icon?: ReactNode` — decorative icon in a popup menu row
   - `hotkey?`
   - `shortcut?`
   - `checked?`

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/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.56",
   "private": false,
   "description": "React components with a precise DOS-era utility interface.",
   "license": "MIT",