@nordmanai/nif 0.2.12 → 0.2.14

package/registry/ui/components/nm-dropdown-menu/nm-dropdown-menu.tsx

@@ -8,7 +8,9 @@ import type { NmDropdownItem } from '../nm-dropdown/nm-dropdown-item.ts';
 const InGroup = createContext(false);
 
 /** Base UI Menu, in the shadcn dropdown-menu composition, styled by NIF tokens. */
-export function NmDropdownMenu(props: MenuPrimitive.Root.Props) {
+export type NmDropdownMenuProps = MenuPrimitive.Root.Props;
+
+export function NmDropdownMenu(props: NmDropdownMenuProps) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
@@ -150,7 +152,7 @@ function itemBody(item: NmDropdownItem) {
   );
 }
 
-/** A list of NmDropdownItem as animated menu rows: branches become submenus, `checked` rows keep a mark. */
+/** A list of NmDropdownItem as animated menu rows: branches become submenus, `checked` rows keep a mark, the `current` row (or the `selected` id) is filled. */
 export function NmDropdownMenuItems({
   items,
   selected,
@@ -178,7 +180,15 @@ export function NmDropdownMenuItems({
             </NmDropdownMenuSub>
           );
         }
-        const checked = item.checked ?? (selected != null ? item.id === selected : undefined);
+        const current = item.current === true || (selected != null && item.id === selected);
+        if (current) {
+          return (
+            <NmDropdownMenuItem key={item.id} data-current="" aria-current="true" disabled={item.disabled} onClick={() => onSelect?.(item.id)}>
+              {itemBody(item)}
+            </NmDropdownMenuItem>
+          );
+        }
+        const checked = item.checked;
         if (checked !== undefined) {
           return (
             <NmDropdownMenuCheckboxItem key={item.id} checked={checked} disabled={item.disabled} onClick={() => onSelect?.(item.id)}>

package/registry/ui/components/nm-sidebar/nm-sidebar.css

@@ -432,6 +432,41 @@
   .nm-sidebar__menu-item:has(> .nm-sidebar__menu-action) > .nm-sidebar__menu-button {
     padding-inline-end: var(--nm-icon-control);
   }
+  .nm-sidebar__menu-item:has(> .nm-sidebar__menu-actions) > .nm-sidebar__menu-button {
+    padding-inline-end: calc(var(--nm-icon-control) * 2);
+  }
+  /* A group of actions at the end of a row. Its actions sit in flow inside it; the group takes the row's end. */
+  .nm-sidebar__menu-actions {
+    position: absolute;
+    inset-inline-end: var(--nm-space-4);
+    top: calc(50% - (var(--nm-icon-button) + var(--nm-space-6) * 2) / 2);
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-2);
+    transition: opacity var(--reveal) var(--ease);
+  }
+  .nm-sidebar__menu-actions > .nm-sidebar__menu-action,
+  .nm-sidebar__menu-actions .nm-dropdown {
+    position: static;
+  }
+  .nm-sidebar__menu-actions[data-show-on-hover] {
+    opacity: 0;
+  }
+  .nm-sidebar__menu-item:hover > .nm-sidebar__menu-actions[data-show-on-hover],
+  .nm-sidebar__menu-item:focus-within > .nm-sidebar__menu-actions[data-show-on-hover],
+  .nm-sidebar__menu-item:has(> [data-active]) > .nm-sidebar__menu-actions[data-show-on-hover],
+  .nm-sidebar__menu-actions[data-show-on-hover]:has([data-popup-open]),
+  .nm-sidebar__menu-actions[data-show-on-hover]:has([aria-expanded='true']) {
+    opacity: 1;
+  }
+  /* A bar in the header or footer: its controls spread to the ends. */
+  .nm-sidebar__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nm-space-8);
+    padding: var(--nm-space-4);
+  }
 
   /* The chevron of a row that opens. It points right when closed and down when open. */
   .nm-sidebar__chevron {

package/registry/ui/components/nm-sidebar/nm-sidebar.tsx

@@ -26,6 +26,7 @@ import {
 } from '../../config/nm-sidebar.ts';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { NmChip } from '../nm-chip/nm-chip.tsx';
+import { NmDropdownMenu, type NmDropdownMenuProps } from '../nm-dropdown-menu/nm-dropdown-menu.tsx';
 import { NmDrawer, NmDrawerContent } from '../nm-drawer/nm-drawer.tsx';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 import { NmInput } from '../nm-input/nm-input.tsx';
@@ -63,6 +64,11 @@ const SidebarContext = createContext<SidebarContextValue | null>(null);
 const PEEK_KEEPS = '[data-slot="sidebar"], [data-slot="sidebar-trigger"], [data-slot="tooltip-content"], [role="menu"], [role="dialog"]';
 
 /** The sidebar's state: expanded or collapsed, peeking, on a desktop or a phone, and the function that toggles it. */
+/** Whether the sidebar is in view: open or peeking on a desktop, the drawer open on a phone. */
+export function useSidebarVisible(): boolean {
+  const { open, peek, isMobile, openMobile } = useSidebar();
+  return isMobile ? openMobile : open || peek;
+}
 /** The sidebar context when there is one. For a part that lives in a bar shared by pages with and without a sidebar. */
 export function useOptionalSidebar(): SidebarContextValue | null {
   return useContext(SidebarContext);
@@ -477,6 +483,14 @@ export function NmSidebarMenuAction({ className, showOnHover = false, ...props }
   );
 }
 
+/** Several actions at the end of a row, such as new and more. They reveal together when `showOnHover`. */
+export function NmSidebarMenuActions({ className, showOnHover = false, ...props }: ComponentProps<'div'> & { showOnHover?: boolean }): ReactNode {
+  return <div data-slot="sidebar-menu-actions" data-show-on-hover={showOnHover ? '' : undefined} className={nmClass('nm-sidebar__menu-actions', className)} {...props} />;
+}
+/** A row of controls in the header or footer, such as a primary button and an icon button, spaced apart. */
+export function NmSidebarBar({ className, ...props }: ComponentProps<'div'>): ReactNode {
+  return <div data-slot="sidebar-bar" className={nmClass('nm-sidebar__bar', className)} {...props} />;
+}
 /** A count or a short word at the end of a row. The NIF Chip, small. */
 export function NmSidebarMenuBadge({ className, ...props }: ComponentProps<typeof NmChip>): ReactNode {
   return <NmChip data-slot="sidebar-menu-badge" size="sm" className={nmClass('nm-sidebar__menu-badge', className)} {...props} />;
@@ -549,3 +563,27 @@ export function NmSidebarMenuSubButton({
 export function NmSidebarChevron({ className, menu = false, ...props }: Omit<ComponentProps<typeof NmIcon>, 'id'> & { menu?: boolean }): ReactNode {
   return <NmIcon id="chevron" data-menu={menu ? '' : undefined} className={nmClass('nm-sidebar__chevron', className)} {...props} />;
 }
+
+/**
+ * A dropdown menu opened from the sidebar. It closes the moment the sidebar goes out of view
+ * (collapsed, a peek that ended, the drawer closed), so no menu outlives the panel it came from.
+ * While it is open the pointer may rest on it without ending a peek.
+ */
+export function NmSidebarDropdownMenu({ open: openProp, onOpenChange, ...props }: NmDropdownMenuProps) {
+  const visible = useSidebarVisible();
+  const [openState, setOpenState] = useState(false);
+  const open = (openProp ?? openState) && visible;
+  const handleOpenChange = useCallback<NonNullable<NmDropdownMenuProps['onOpenChange']>>(
+    (next, details) => {
+      setOpenState(next);
+      onOpenChange?.(next, details);
+    },
+    [onOpenChange],
+  );
+  useEffect(() => {
+    if (!visible) {
+      setOpenState(false);
+    }
+  }, [visible]);
+  return <NmDropdownMenu open={open} onOpenChange={handleOpenChange} {...props} />;
+}

package/registry/ui/components/nm-small-icon-button/nm-small-icon-button.tsx

@@ -6,6 +6,7 @@ import {
 } from '../../config/nm-small-icon-button.ts';
 import { NM_ICON_BUTTON_TONES, type NmIconButtonTone } from '../../config/nm-icon-button.ts';
 import { NordmanIconButton } from '../nordman-icon-button/nordman-icon-button.tsx';
+import type { NmControlShape } from '../../config/nm-shape.ts';
 import { createLogger } from '../../kit-logger.ts';
 
 const logger = createLogger('interface-nm-small-icon-button');
@@ -19,6 +20,8 @@ export type NmSmallIconButtonProps = {
   label: string;
   icon: NmIconId;
   tone?: NmSmallIconButtonTone;
+  /** Soft follows the themed radius; round is a full circle. */
+  shape?: NmControlShape;
   active?: boolean;
   iconContent?: ReactNode;
   testId?: string;
@@ -31,6 +34,7 @@ export const NmSmallIconButton = forwardRef<HTMLButtonElement, NmSmallIconButton
       label,
       icon,
       tone = NM_SMALL_ICON_BUTTON_TONES.solid,
+      shape,
       active = false,
       iconContent,
       testId,
@@ -47,6 +51,7 @@ export const NmSmallIconButton = forwardRef<HTMLButtonElement, NmSmallIconButton
         glyph={icon}
         label={label}
         tone={SMALL_ICON_BUTTON_TONE[tone]}
+        shape={shape}
         active={active}
         disabled={disabled}
         testId={testId}

package/registry/ui/components/nordman-icon-button/nordman-icon-button.css

@@ -93,6 +93,9 @@
     cursor: pointer;
   }
 
+  .nm-icon-button--round {
+    border-radius: var(--nm-radius-round);
+  }
   .nm-icon-button--invert.nm-chatbox__send:not(:disabled),
   .nm-icon-button--invert.nm-chatbox__send:not(:disabled):hover,
   .nm-icon-button--invert.nm-chatbox__send:not(:disabled):focus-visible {

package/registry/ui/components/nordman-icon-button/nordman-icon-button.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
+import { NM_CONTROL_SHAPES, type NmControlShape } from '../../config/nm-shape.ts';
 import {
   NM_ICON_BUTTON_CLASSES,
   NM_ICON_BUTTON_TONES,
@@ -24,6 +25,8 @@ type NordmanIconButtonProps = {
   label: string;
   href?: string;
   tone?: NmIconButtonTone;
+  /** Soft follows the themed radius; round is a full circle. */
+  shape?: NmControlShape;
   variant?: NordmanIconButtonVariant;
   testId?: string;
   imageSrc?: string;
@@ -55,12 +58,14 @@ function iconButtonTone(
 
 function iconButtonClass(
   tone: NmIconButtonTone,
+  shape: NmControlShape | undefined,
   active: boolean,
   className: string | undefined,
 ): string {
   return [
     NM_ICON_BUTTON_CLASSES.root,
     tone === NM_ICON_BUTTON_TONES.line ? '' : NM_ICON_BUTTON_CLASSES[tone],
+    shape === NM_CONTROL_SHAPES.round ? NM_ICON_BUTTON_CLASSES.round : '',
     active ? NM_ICON_BUTTON_CLASSES.active : '',
     className ?? '',
   ]
@@ -127,6 +132,7 @@ export const NordmanIconButton = forwardRef<HTMLButtonElement, NordmanIconButton
       label,
       href,
       tone,
+      shape,
       variant,
       active = false,
       pressed,
@@ -142,7 +148,7 @@ export const NordmanIconButton = forwardRef<HTMLButtonElement, NordmanIconButton
       ...rest
     } = props;
     const resolvedTone = iconButtonTone(tone, variant);
-    const buttonClass = iconButtonClass(resolvedTone, active, className);
+    const buttonClass = iconButtonClass(resolvedTone, shape, active, className);
     const marked = pressed ?? checked ?? (active ? true : undefined);
     logger.debug('render', glyph ?? icon ?? label, { href: Boolean(href), tone: resolvedTone });
     const face = (

package/registry/ui/config/nm-button.ts

@@ -36,6 +36,7 @@ export const NM_BUTTON_CLASSES = {
   large: 'nm-button--large',
   block: 'nm-button--block',
   icon: 'nm-button--icon',
+  round: 'nm-button--round',
 } as const;
 
 /** The button's class names, for triggers that must stay a Base UI part, such as a menu or popover trigger. */

package/registry/ui/config/nm-composer.ts

@@ -2,6 +2,7 @@
  * Composer: the message box. Built from the Nordman AI design:
  * one framed box, the text on top, actions in a row beneath. Add on the left, dictate and voice on the right.
  */
+import { NM_SHAPE_ATTRIBUTE } from './nm-shape.ts';
 export const NM_COMPOSER_COPY = {
   placeholder: 'Ask Nordman',
   attach: 'Add',
@@ -44,6 +45,8 @@ export const NM_COMPOSER_CLASSES = {
   primary: 'nm-composer__button--primary',
   stopMark: 'nm-composer__stop-mark',
 } as const;
+/** Set on the root with a shape value; every button in the bar, own or hosted, takes that shape. */
+export const NM_COMPOSER_SHAPE_ATTRIBUTE = NM_SHAPE_ATTRIBUTE;
 
 export type NmComposerAttachment = { id: string; name: string };
 

package/registry/ui/config/nm-dropdown.ts

@@ -51,6 +51,13 @@ export const NM_DROPDOWN_ALIGN = {
   row: 'row',
 } as const;
 
+/** Which side of the trigger the menu opens on. `right` for a menu that must not cover a side panel's rows. */
+export const NM_DROPDOWN_SIDE = {
+  bottom: 'bottom',
+  top: 'top',
+  right: 'right',
+  left: 'left',
+} as const;
 /** Icon menus stay hidden until the host row or field is hovered or focused. */
 export const NM_DROPDOWN_REVEAL = {
   hover: 'hover',

package/registry/ui/config/nm-icon-button.ts

@@ -1,3 +1,4 @@
+import { NM_CONTROL_SHAPES, type NmControlShape } from './nm-shape.ts';
 export const NM_ICON_BUTTON_TONES = {
   line: 'line',
   raised: 'raised',
@@ -19,15 +20,20 @@ export const NM_ICON_BUTTON_CLASSES = {
   solid: 'nm-icon-button--solid',
   panel: 'nm-icon-button--panel',
   invert: 'nm-icon-button--invert',
+  round: 'nm-icon-button--round',
 } as const;
 
 /** Shared geometry hook for send / stop / during-run primary composer actions. */
 export const NM_CHATBOX_ACTION_CLASS = 'nm-chatbox__send';
 
-export function nmIconButtonClassName(tone: NmIconButtonTone = NM_ICON_BUTTON_TONES.quiet): string {
-  return `${NM_ICON_BUTTON_CLASSES.root} ${NM_ICON_BUTTON_CLASSES[tone]}`;
+export function nmIconButtonClassName(
+  tone: NmIconButtonTone = NM_ICON_BUTTON_TONES.quiet,
+  shape?: NmControlShape,
+): string {
+  const base = `${NM_ICON_BUTTON_CLASSES.root} ${NM_ICON_BUTTON_CLASSES[tone]}`;
+  return shape === NM_CONTROL_SHAPES.round ? `${base} ${NM_ICON_BUTTON_CLASSES.round}` : base;
 }
-
-export function nmChatboxActionButtonClassName(): string {
-  return `${NM_ICON_BUTTON_CLASSES.root} ${NM_ICON_BUTTON_CLASSES.invert} ${NM_CHATBOX_ACTION_CLASS}`;
+export function nmChatboxActionButtonClassName(shape?: NmControlShape): string {
+  const base = `${NM_ICON_BUTTON_CLASSES.root} ${NM_ICON_BUTTON_CLASSES.invert} ${NM_CHATBOX_ACTION_CLASS}`;
+  return shape === NM_CONTROL_SHAPES.round ? `${base} ${NM_ICON_BUTTON_CLASSES.round}` : base;
 }

package/registry/ui/config/nm-shape.ts

@@ -0,0 +1,11 @@
+/**
+ * Control shape. Soft is the kit default: corners follow the themed radius scale.
+ * Round is a full circle (or pill): it ignores the radius scale, a circle has no corner to scale.
+ */
+export const NM_CONTROL_SHAPES = {
+  soft: 'soft',
+  round: 'round',
+} as const;
+export type NmControlShape = (typeof NM_CONTROL_SHAPES)[keyof typeof NM_CONTROL_SHAPES];
+/** The data attribute a container sets to round every control inside it. */
+export const NM_SHAPE_ATTRIBUTE = 'data-button-shape';

package/registry/ui/styles/tokens.css

@@ -93,6 +93,8 @@
   --nm-radius-sm: calc(4px * var(--nm-radius-scale));
   --nm-radius-md: calc(8px * var(--nm-radius-scale));
   --nm-radius-lg: calc(12px * var(--nm-radius-scale));
+  /* A full circle or pill. Not scaled: a circle has no corner. */
+  --nm-radius-round: 9999px;
   /* 100% by default. The Space setting scales every spacing token. */
   --nm-space-scale: 1;
   --nm-space-2: calc(0.125rem * var(--nm-space-scale));