@deadragdoll/reactnu 0.1.56 → 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,6 +49,17 @@
   --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;
@@ -1086,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 var(--nu-glyph-cell-size) 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);
@@ -1147,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;
@@ -1164,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;
@@ -1184,24 +1216,41 @@
   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);
@@ -1807,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;
@@ -1899,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);
@@ -2387,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] {
@@ -2433,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;
@@ -2448,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;

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/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

@@ -29,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/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/package.json

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