@deadragdoll/reactnu 0.1.52 → 0.1.56

package/dist/components/MainMenu/MainMenu.types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 export type MainMenuFlags = {
     checkable?: boolean;
     checked?: boolean;
@@ -11,6 +12,8 @@ export type MainMenuDivider = {
 };
 export type MainMenuItem = MainMenuFlags & {
     id: string;
+    /** Decorative mark shown before the item label in popup menus. */
+    icon?: ReactNode;
     items?: MainMenuNode[];
     modifier?: string;
     onSelect?: () => void;

package/dist/components/Window/Window.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PropsWithChildren, ReactNode } from "react";
+import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
 import { WindowTitleButtonDefinition } from "./WindowTitleButton";
 import { NuWindowBounds } from "../../windowing/windowing.types";
 export type WindowMode = "dialog" | "window";
@@ -13,12 +13,18 @@ export type WindowSize = {
 };
 export type WindowProps = PropsWithChildren<Omit<HTMLAttributes<HTMLElement>, "title"> & {
     active?: boolean;
+    /** Locks pointer resizing to width / height when set to a positive number. */
+    aspectRatio?: number;
     bodyClassName?: string;
     border?: WindowBorder;
     closeable?: boolean;
     draggable?: boolean;
+    /** Decorative visual rendered in the fixed left title-bar slot. */
+    icon?: ReactNode;
     maximizable?: boolean;
     maximized?: boolean;
+    minHeight?: CSSProperties["minHeight"];
+    minWidth?: CSSProperties["minWidth"];
     minimizable?: boolean;
     minimized?: boolean;
     mode?: WindowMode;
@@ -36,6 +42,6 @@ export type WindowProps = PropsWithChildren<Omit<HTMLAttributes<HTMLElement>, "t
     titleButtons?: WindowTitleButtonDefinition[];
     title: string;
 }>;
-declare function WindowInner({ active, bodyClassName, border, children, className, closeable, draggable, maximizable, maximized, minimizable, minimized, mode, onActivate, onBoundsChange, onClose, onPointerDownCapture, onPositionChange, onSizeChange, onToggleMaximized, onToggleMinimized, resizable, scrollable, statusBarClassName, statusBar, style, titleButtons, title, ...props }: WindowProps): import("react/jsx-runtime").JSX.Element;
+declare function WindowInner({ active, aspectRatio, bodyClassName, border, children, className, closeable, draggable, icon, maximizable, maximized, minHeight, minWidth, minimizable, minimized, mode, onActivate, onBoundsChange, onClose, onPointerDownCapture, onPositionChange, onSizeChange, onToggleMaximized, onToggleMinimized, resizable, scrollable, statusBarClassName, statusBar, style, titleButtons, title, ...props }: WindowProps): import("react/jsx-runtime").JSX.Element;
 export declare const Window: import("react").MemoExoticComponent<typeof WindowInner>;
 export {};

package/dist/components/Window/internals/WindowTitleBar.d.ts

@@ -1,10 +1,11 @@
-import { PointerEventHandler } from "react";
+import { PointerEventHandler, ReactNode } from "react";
 import { WindowTitleButtonDefinition } from "../WindowTitleButton";
 type WindowTitleBarProps = {
     draggable: boolean;
+    icon?: ReactNode;
     onDragStart?: PointerEventHandler<HTMLElement>;
     titleButtons: WindowTitleButtonDefinition[];
     title: string;
 };
-export declare function WindowTitleBar({ draggable, onDragStart, titleButtons, title }: WindowTitleBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function WindowTitleBar({ draggable, icon, onDragStart, titleButtons, title }: WindowTitleBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.cjs

@@ -471,6 +471,7 @@ function MainMenuList({
                         ) : isChecked ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NuGlyph, { name: "check-mark" }) : null
                       }
                     ) : null,
+                    isPopupRow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": "true", className: "nu-main-menu__icon", children: item.icon }) : null,
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nu-main-menu__label", children: renderItemLabel(item) }),
                     isPopupRow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nu-main-menu__shortcut", children: resolveItemShortcut(item) }) : null,
                     isPopupRow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nu-main-menu__submenu-arrow", children: hasChildren ? "\u25B6" : "" }) : null
@@ -1731,6 +1732,7 @@ function MdiWindowPickerDialog({
             items: resolvedWindows.map((windowEntry, index) => ({
               id: windowEntry.id,
               name: {
+                icon: windowEntry.icon,
                 text: `${index + 1} ${formatPickerWindowTitle(windows, windowEntry)}`
               },
               selected: windowEntry.id === activeWindowId
@@ -1846,6 +1848,7 @@ function buildStandardMdiMenuItems(bridge) {
     ...mdiWindows.map((windowEntry, index) => ({
       checked: windowEntry.id === activeWindowId,
       id: `mdi.window.${windowEntry.id}`,
+      icon: windowEntry.icon,
       onSelect: () => bridge?.activateWindow(windowEntry.id),
       text: `${index + 1} ${windowEntry.title}`
     })),
@@ -2069,6 +2072,7 @@ function WindowTitleButton({
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function WindowTitleBar({
   draggable,
+  icon,
   onDragStart,
   titleButtons,
   title
@@ -2084,6 +2088,7 @@ function WindowTitleBar({
         "--nu-window-title-controls-width": controlsWidth
       },
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { "aria-hidden": true, className: "nu-window__title-icon", children: icon }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "nu-window__title", children: renderMnemonicText(title) }),
         titleButtons.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "nu-window__title-controls", children: titleButtons.map((button, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           WindowTitleButton,
@@ -2184,16 +2189,23 @@ function getWindowGeometry(node) {
     width: rect.width
   };
 }
+function getValidAspectRatio(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : void 0;
+}
 function WindowInner({
   active = true,
+  aspectRatio,
   bodyClassName,
   border = "single",
   children,
   className,
   closeable = true,
   draggable,
+  icon,
   maximizable,
   maximized = false,
+  minHeight,
+  minWidth,
   minimizable,
   minimized = false,
   mode = "dialog",
@@ -2222,7 +2234,8 @@ function WindowInner({
   const menuState = useMainMenuState();
   const windowManager = (0, import_react13.useContext)(NuWindowContext);
   const isDraggable = draggable ?? mode === "window";
-  const isMaximizable = maximizable ?? mode === "window";
+  const resolvedAspectRatio = getValidAspectRatio(aspectRatio);
+  const isMaximizable = resolvedAspectRatio === void 0 && (maximizable ?? mode === "window");
   const isMinimizable = minimizable ?? mode === "window";
   const isResizable = resizable ?? mode === "window";
   const mdiBridge = (0, import_react13.useMemo)(
@@ -2372,22 +2385,16 @@ function WindowInner({
     } = getWindowGeometry(windowNode);
     const layerBounds = getWindowLayerBounds(windowNode);
     const computedStyle = window.getComputedStyle(windowNode);
-    const minWidth = Math.max(
-      Number.parseFloat(computedStyle.minWidth || "0") || 0,
-      240
-    );
-    const minHeight = Math.max(
-      Number.parseFloat(computedStyle.minHeight || "0") || 0,
-      120
-    );
-    const maxWidth = Math.max(
-      minWidth,
-      (layerBounds?.width ?? window.innerWidth) - left
-    );
-    const maxHeight = Math.max(
-      minHeight,
-      (layerBounds?.height ?? window.innerHeight) - top
-    );
+    const minWidth2 = Number.parseFloat(computedStyle.minWidth || "0") || 0;
+    const minHeight2 = Number.parseFloat(computedStyle.minHeight || "0") || 0;
+    const availableWidth = (layerBounds?.width ?? window.innerWidth) - left;
+    const availableHeight = (layerBounds?.height ?? window.innerHeight) - top;
+    const ratioMinWidth = resolvedAspectRatio ? Math.max(minWidth2, minHeight2 * resolvedAspectRatio) : minWidth2;
+    const maxWidth = resolvedAspectRatio ? Math.max(
+      ratioMinWidth,
+      Math.min(availableWidth, availableHeight * resolvedAspectRatio)
+    ) : Math.max(minWidth2, availableWidth);
+    const maxHeight = resolvedAspectRatio ? maxWidth / resolvedAspectRatio : Math.max(minHeight2, availableHeight);
     const hadTransform = computedStyle.transform !== "none";
     let didResize = false;
     if (hadTransform) {
@@ -2412,14 +2419,16 @@ function WindowInner({
       resizeFrameRef.current = window.requestAnimationFrame(flushResize);
     }
     function handlePointerMove(moveEvent) {
-      const nextWidth = Math.min(
+      const widthDelta = moveEvent.clientX - startClientX;
+      const heightDelta = moveEvent.clientY - startClientY;
+      const nextWidth = resolvedAspectRatio ? Math.min(
         maxWidth,
-        Math.max(minWidth, startWidth + moveEvent.clientX - startClientX)
-      );
-      const nextHeight = Math.min(
-        maxHeight,
-        Math.max(minHeight, startHeight + moveEvent.clientY - startClientY)
-      );
+        Math.max(
+          ratioMinWidth,
+          startWidth + (Math.abs(widthDelta) >= Math.abs(heightDelta * resolvedAspectRatio) ? widthDelta : heightDelta * resolvedAspectRatio)
+        )
+      ) : Math.min(maxWidth, Math.max(minWidth2, startWidth + widthDelta));
+      const nextHeight = resolvedAspectRatio ? nextWidth / resolvedAspectRatio : Math.min(maxHeight, Math.max(minHeight2, startHeight + heightDelta));
       didResize = true;
       scheduleResize({
         height: nextHeight,
@@ -2459,7 +2468,11 @@ function WindowInner({
       "data-mode": mode,
       onPointerDownCapture: handleRootPointerDownCapture,
       ref: windowRef,
-      style,
+      style: {
+        ...style,
+        minHeight: minHeight ?? style?.minHeight ?? 120,
+        minWidth: minWidth ?? style?.minWidth ?? 240
+      },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "span",
@@ -2480,6 +2493,7 @@ function WindowInner({
             WindowTitleBar,
             {
               draggable: isDraggable,
+              icon,
               onDragStart: handleTitlePointerDown,
               title,
               titleButtons: resolvedTitleButtons
@@ -2613,6 +2627,7 @@ function buildWindowBarGroups(items) {
       groups.push({
         active: Boolean(item.active),
         id: item.id,
+        icon: item.icon,
         items: [item],
         label: item.title
       });
@@ -2624,6 +2639,7 @@ function buildWindowBarGroups(items) {
         active: Boolean(item.active),
         domain: item.domain,
         id: item.id,
+        icon: item.icon,
         items: [item],
         label: item.title
       };
@@ -2633,10 +2649,16 @@ function buildWindowBarGroups(items) {
     }
     existingGroup.items.push(item);
     existingGroup.active = existingGroup.active || Boolean(item.active);
+    if (item.active) {
+      existingGroup.icon = item.icon;
+    }
     existingGroup.label = `${item.domain} (${existingGroup.items.length})`;
   });
   return groups;
 }
+function getGroupIcon(group) {
+  return group.items.find((item) => item.active)?.icon ?? group.icon;
+}
 function WindowBar({ items, onActivateWindow }) {
   const windowManager = (0, import_react15.useContext)(NuWindowContext);
   const groups = buildWindowBarGroups(items);
@@ -2677,17 +2699,23 @@ function WindowBar({ items, onActivateWindow }) {
     };
     windowManager.openDialog(dialogDefinition);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "nu-window-bar", role: "group", "aria-label": "Open windows", children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    AppBarItem,
-    {
-      active: group.active,
-      className: "nu-window-bar__item",
-      interactive: true,
-      onClick: () => activateGroup(group),
-      children: group.label
-    },
-    group.id
-  )) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "nu-window-bar", role: "group", "aria-label": "Open windows", children: groups.map((group) => {
+    const icon = getGroupIcon(group);
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      AppBarItem,
+      {
+        active: group.active,
+        className: "nu-window-bar__item",
+        interactive: true,
+        onClick: () => activateGroup(group),
+        children: [
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": true, className: "nu-window-bar__icon", children: icon }) : null,
+          group.label
+        ]
+      },
+      group.id
+    );
+  }) });
 }
 
 // src/windowing/dialogHelpers.tsx
@@ -3127,6 +3155,7 @@ function buildWindowRecord(definition, currentWindows, windowBoundsById, creatio
     ownerCenteredStyle,
     index
   );
+  const hasAspectRatio = typeof definition.aspectRatio === "number" && Number.isFinite(definition.aspectRatio) && definition.aspectRatio > 0;
   return {
     ...definition,
     appModal,
@@ -3135,18 +3164,18 @@ function buildWindowRecord(definition, currentWindows, windowBoundsById, creatio
     creationOrder,
     draggable: mode === "window",
     id,
-    maximizable: definition.maximizable ?? mode === "window",
+    maximizable: !hasAspectRatio && (definition.maximizable ?? mode === "window"),
     modalOwnerId,
     minimizable: definition.minimizable ?? mode === "window",
     mode,
     resizable: definition.resizable ?? mode === "window",
-    restoreStyle: savedWindowState.restoreStyle,
+    restoreStyle: hasAspectRatio ? void 0 : savedWindowState.restoreStyle,
     title: resolveManagedWindowTitle(currentWindows, titleBase),
     titleBase,
     style: {
       ...savedWindowState.style
     },
-    maximized: savedWindowState.maximized,
+    maximized: hasAspectRatio ? false : savedWindowState.maximized,
     minimized: savedWindowState.minimized
   };
 }
@@ -3361,7 +3390,7 @@ function NuWindowProvider({
   const toggleWindowMaximized = (0, import_react18.useCallback)((id) => {
     setWindows(
       (currentWindows) => currentWindows.map((windowEntry) => {
-        if (windowEntry.id !== id) {
+        if (windowEntry.id !== id || !windowEntry.maximizable) {
           return windowEntry;
         }
         if (windowEntry.maximized) {
@@ -3527,21 +3556,32 @@ function NuWindowProvider({
   const topmostAppModalIndex = findTopmostAppModalIndex(visibleWindows);
   const topmostAppModalId = topmostAppModalIndex >= 0 ? visibleWindows[topmostAppModalIndex]?.id : void 0;
   const activeWindowId = topmostAppModalIndex >= 0 ? visibleWindows[topmostAppModalIndex]?.id : visibleWindows[visibleWindows.length - 1]?.id;
+  const activeWindow = activeWindowId ? windows.find((windowEntry) => windowEntry.id === activeWindowId) : void 0;
+  const activeActivationGroup = topmostAppModalIndex >= 0 ? void 0 : activeWindow?.activationGroup;
   const hasAppModal = topmostAppModalIndex >= 0;
+  const isWindowActive = (0, import_react18.useCallback)(
+    (windowEntry) => windowEntry.id === activeWindowId || activeActivationGroup !== void 0 && windowEntry.activationGroup === activeActivationGroup,
+    [activeActivationGroup, activeWindowId]
+  );
   const windowsInfo = (0, import_react18.useMemo)(
     () => [...windows].sort(
       (leftWindow, rightWindow) => leftWindow.creationOrder - rightWindow.creationOrder
     ).map((windowEntry) => ({
-      active: windowEntry.id === activeWindowId,
+      active: isWindowActive(windowEntry),
+      activationGroup: windowEntry.activationGroup,
+      aspectRatio: windowEntry.aspectRatio,
       bodyClassName: windowEntry.bodyClassName,
       appModal: windowEntry.appModal,
       border: windowEntry.border,
       className: windowEntry.className,
       closeable: windowEntry.closeable,
       domain: windowEntry.domain,
+      icon: windowEntry.icon,
       id: windowEntry.id,
       maximizable: windowEntry.maximizable,
       maximized: windowEntry.maximized,
+      minHeight: windowEntry.minHeight,
+      minWidth: windowEntry.minWidth,
       modal: windowEntry.modalOwnerId ?? false,
       minimizable: windowEntry.minimizable,
       minimized: windowEntry.minimized,
@@ -3552,7 +3592,7 @@ function NuWindowProvider({
       title: windowEntry.title,
       titleButtons: windowEntry.titleButtons
     })),
-    [activeWindowId, windows]
+    [isWindowActive, windows]
   );
   const mdiBridge = (0, import_react18.useMemo)(
     () => ({
@@ -3612,7 +3652,7 @@ function NuWindowProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NuWindowContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: ["nu-window-host", className].filter(Boolean).join(" "), children: [
     children,
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "nu-window-layer", children: renderWindows.map((windowEntry) => {
-      const isActiveWindow = windowEntry.id === activeWindowId;
+      const isActiveWindow = isWindowActive(windowEntry);
       const stackIndex = stackIndexById.get(windowEntry.id);
       const isTopmostAppModal = windowEntry.id === topmostAppModalId;
       const ownerBounds = windowEntry.modalOwnerId ? windowBoundsById[windowEntry.modalOwnerId] : void 0;
@@ -3658,12 +3698,16 @@ function NuWindowProvider({
           Window,
           {
             active: isActiveWindow,
+            aspectRatio: windowEntry.aspectRatio,
             bodyClassName: windowEntry.bodyClassName,
             border: windowEntry.border,
             className: windowEntry.className,
             closeable: windowEntry.closeable,
             draggable: windowEntry.draggable,
+            icon: windowEntry.icon,
             maximizable: windowEntry.maximizable,
+            minHeight: windowEntry.minHeight,
+            minWidth: windowEntry.minWidth,
             minimizable: windowEntry.minimizable,
             maximized: windowEntry.maximized,
             minimized: windowEntry.minimized,
@@ -3694,6 +3738,7 @@ function NuWindowProvider({
           active: windowEntry.active,
           domain: windowEntry.domain,
           id: windowEntry.id,
+          icon: windowEntry.icon,
           minimized: windowEntry.minimized,
           title: windowEntry.title
         })),