@nordmanai/nif 0.2.12 → 0.2.14

package/dist/ui/components/nm-button/nm-button.d.ts

@@ -1,12 +1,15 @@
 import { type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { NM_BUTTON_SIZES, NM_BUTTON_TONES, type NmButtonSize, type NmButtonTone } from '../../config/nm-button.ts';
+import { type NmControlShape } from '../../config/nm-shape.ts';
 export type NmButtonProps = {
     label: string;
     /** Content of the button in place of the icon and label, for a button that holds more than text. The label is still its accessible name when icon only. */
     children?: ReactNode;
     tone: NmButtonTone;
     size?: NmButtonSize;
+    /** Soft follows the themed radius; round is a pill. */
+    shape?: NmControlShape;
     block?: boolean;
     type?: 'button' | 'submit';
     disabled?: boolean;

package/dist/ui/components/nm-composer/nm-composer.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode, type Ref, type TextareaHTMLAttributes } from 'react';
 import { type NmComposerAttachment, type NmComposerQueued } from '../../config/nm-composer.ts';
+import type { NmControlShape } from '../../config/nm-shape.ts';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import type { OrbAdapter } from 'orb-ui';
 import type { NmVoiceOrbAgentState } from '../../config/nm-voice-orb.ts';
@@ -72,5 +73,7 @@ export type NmComposerProps = {
     formless?: boolean;
     /** The host owns the text: the field is not controlled by `value`, and `value` only says whether there is any. */
     uncontrolled?: boolean;
+    /** Shape of every button in the bar, own and hosted. Round makes them circles. */
+    buttonShape?: NmControlShape;
 };
 export declare function NmComposer(props: NmComposerProps): ReactNode;

package/dist/ui/components/nm-dropdown/nm-dropdown-item.d.ts

@@ -13,6 +13,8 @@ export type NmDropdownItem = {
     danger?: boolean;
     disabled?: boolean;
     checked?: boolean;
+    /** The row that is the current choice in a list of alternatives. Shown by fill, not by a mark; for a toggle use `checked`. */
+    current?: boolean;
     /** Publish row state. The row stays inactive while busy or live. */
     mark?: 'idle' | 'busy' | 'live';
     children?: readonly NmDropdownItem[];

package/dist/ui/components/nm-dropdown/nm-dropdown.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode, type Ref } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
-import { NM_DROPDOWN_ALIGN, NM_DROPDOWN_REVEAL, NM_DROPDOWN_TONE, NM_DROPDOWN_TRIGGER } from '../../config/nm-dropdown.ts';
+import { NM_DROPDOWN_ALIGN, NM_DROPDOWN_REVEAL, NM_DROPDOWN_SIDE, NM_DROPDOWN_TONE, NM_DROPDOWN_TRIGGER } from '../../config/nm-dropdown.ts';
 import type { NmDropdownItem } from './nm-dropdown-item';
 export type { NmDropdownItem };
 export type NmDropdownProps = {
@@ -11,6 +11,7 @@ export type NmDropdownProps = {
     trigger?: (typeof NM_DROPDOWN_TRIGGER)[keyof typeof NM_DROPDOWN_TRIGGER];
     tone?: (typeof NM_DROPDOWN_TONE)[keyof typeof NM_DROPDOWN_TONE];
     align?: (typeof NM_DROPDOWN_ALIGN)[keyof typeof NM_DROPDOWN_ALIGN];
+    side?: (typeof NM_DROPDOWN_SIDE)[keyof typeof NM_DROPDOWN_SIDE];
     icon?: NmIconId;
     imageSrc?: string;
     displayLabel?: string;
@@ -22,6 +23,8 @@ export type NmDropdownProps = {
     /** `hover` hides the trigger until the host with `data-nm-menu` is hovered or focused. */
     reveal?: (typeof NM_DROPDOWN_REVEAL)[keyof typeof NM_DROPDOWN_REVEAL];
     open?: boolean;
+    /** Opens when the trigger is hovered, as well as on click. */
+    openOnHover?: boolean;
     triggerClassName?: string;
     triggerRef?: Ref<HTMLButtonElement>;
     onOpenChange?: (open: boolean) => void;

package/dist/ui/components/nm-dropdown-menu/nm-dropdown-menu.d.ts

@@ -2,7 +2,8 @@ import { type ComponentProps } from 'react';
 import { Menu as MenuPrimitive } from '../../lib/nm-motion.ts';
 import type { NmDropdownItem } from '../nm-dropdown/nm-dropdown-item.ts';
 /** Base UI Menu, in the shadcn dropdown-menu composition, styled by NIF tokens. */
-export declare function NmDropdownMenu(props: MenuPrimitive.Root.Props): import("react").JSX.Element;
+export type NmDropdownMenuProps = MenuPrimitive.Root.Props;
+export declare function NmDropdownMenu(props: NmDropdownMenuProps): import("react").JSX.Element;
 export declare function NmDropdownMenuTrigger(props: MenuPrimitive.Trigger.Props): import("react").JSX.Element;
 type PositionProps = Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
 export declare function NmDropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & PositionProps): import("react").JSX.Element;
@@ -29,7 +30,7 @@ export declare function NmDropdownMenuText({ title, description }: {
 export declare function NmDropdownMenuDot({ status }: {
     status?: 'ok' | 'error';
 }): import("react").JSX.Element;
-/** 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 declare function NmDropdownMenuItems({ items, selected, onSelect, onBranchExpand, }: {
     items: readonly NmDropdownItem[];
     selected?: string | null;

package/dist/ui/components/nm-sidebar/nm-sidebar.d.ts

@@ -2,6 +2,7 @@ import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { type NmSidebarButtonSize, type NmSidebarButtonVariant, type NmSidebarCollapsible, type NmSidebarSide, type NmSidebarState, type NmSidebarVariant } from '../../config/nm-sidebar.ts';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { NmChip } from '../nm-chip/nm-chip.tsx';
+import { type NmDropdownMenuProps } from '../nm-dropdown-menu/nm-dropdown-menu.tsx';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 import { NmInput } from '../nm-input/nm-input.tsx';
 import { NmSeparator } from '../nm-separator/nm-separator.tsx';
@@ -30,6 +31,8 @@ type SidebarContextValue = {
     setCollapsible: (mode: NmSidebarCollapsible) => void;
 };
 /** 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 declare function useSidebarVisible(): boolean;
 /** The sidebar context when there is one. For a part that lives in a bar shared by pages with and without a sidebar. */
 export declare function useOptionalSidebar(): SidebarContextValue | null;
 export declare function useSidebar(): SidebarContextValue;
@@ -112,6 +115,12 @@ export declare function NmSidebarMenuButton({ render, isActive, variant, size, t
 export declare function NmSidebarMenuAction({ className, showOnHover, ...props }: ComponentProps<typeof NmSmallIconButton> & {
     showOnHover?: boolean;
 }): ReactNode;
+/** Several actions at the end of a row, such as new and more. They reveal together when `showOnHover`. */
+export declare function NmSidebarMenuActions({ className, showOnHover, ...props }: ComponentProps<'div'> & {
+    showOnHover?: boolean;
+}): ReactNode;
+/** A row of controls in the header or footer, such as a primary button and an icon button, spaced apart. */
+export declare function NmSidebarBar({ className, ...props }: ComponentProps<'div'>): ReactNode;
 /** A count or a short word at the end of a row. The NIF Chip, small. */
 export declare function NmSidebarMenuBadge({ className, ...props }: ComponentProps<typeof NmChip>): ReactNode;
 /** Two lines in a row, such as a name and a plan in the footer. For a large menu button. */
@@ -137,4 +146,10 @@ export declare function NmSidebarMenuSubButton({ render, size, isActive, disable
 export declare function NmSidebarChevron({ className, menu, ...props }: Omit<ComponentProps<typeof NmIcon>, 'id'> & {
     menu?: boolean;
 }): ReactNode;
+/**
+ * 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 declare function NmSidebarDropdownMenu({ open: openProp, onOpenChange, ...props }: NmDropdownMenuProps): import("react").JSX.Element;
 export {};

package/dist/ui/components/nm-small-icon-button/nm-small-icon-button.d.ts

@@ -1,10 +1,13 @@
 import { type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { type NmSmallIconButtonTone } from '../../config/nm-small-icon-button.ts';
+import type { NmControlShape } from '../../config/nm-shape.ts';
 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;
@@ -14,6 +17,8 @@ export declare const NmSmallIconButton: import("react").ForwardRefExoticComponen
     label: string;
     icon: NmIconId;
     tone?: NmSmallIconButtonTone;
+    /** Soft follows the themed radius; round is a full circle. */
+    shape?: NmControlShape;
     active?: boolean;
     iconContent?: ReactNode;
     testId?: string;

package/dist/ui/components/nordman-icon-button/nordman-icon-button.d.ts

@@ -1,5 +1,6 @@
 import { type ButtonHTMLAttributes, type ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
+import { type NmControlShape } from '../../config/nm-shape.ts';
 import { NM_ICON_BUTTON_TONES, type NmIconButtonTone } from '../../config/nm-icon-button.ts';
 import { type NordmanChromeIconId } from '../../config/nordman-chrome.ts';
 export declare const NORDMAN_ICON_BUTTON_VARIANTS: {
@@ -11,6 +12,8 @@ export declare const NordmanIconButton: import("react").ForwardRefExoticComponen
     label: string;
     href?: string;
     tone?: NmIconButtonTone;
+    /** Soft follows the themed radius; round is a full circle. */
+    shape?: NmControlShape;
     variant?: NordmanIconButtonVariant;
     testId?: string;
     imageSrc?: string;

package/dist/ui/config/nm-button.d.ts

@@ -32,6 +32,7 @@ export declare const NM_BUTTON_CLASSES: {
     readonly large: 'nm-button--large';
     readonly block: 'nm-button--block';
     readonly icon: 'nm-button--icon';
+    readonly round: 'nm-button--round';
 };
 /** The button's class names, for triggers that must stay a Base UI part, such as a menu or popover trigger. */
 export declare function nmButtonClassName(tone: NmButtonTone, size?: NmButtonSize, iconOnly?: boolean): string;

package/dist/ui/config/nm-composer.d.ts

@@ -1,7 +1,3 @@
-/**
- * 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.
- */
 export declare const NM_COMPOSER_COPY: {
     readonly placeholder: 'Ask Nordman';
     readonly attach: 'Add';
@@ -42,6 +38,8 @@ export declare const NM_COMPOSER_CLASSES: {
     readonly primary: 'nm-composer__button--primary';
     readonly stopMark: 'nm-composer__stop-mark';
 };
+/** Set on the root with a shape value; every button in the bar, own or hosted, takes that shape. */
+export declare const NM_COMPOSER_SHAPE_ATTRIBUTE = "data-button-shape";
 export type NmComposerAttachment = {
     id: string;
     name: string;

package/dist/ui/config/nm-dropdown.d.ts

@@ -47,6 +47,13 @@ export declare const NM_DROPDOWN_ALIGN: {
     /** Match the hosting `.nm-rail__row` pill width and left edge. */
     readonly row: 'row';
 };
+/** Which side of the trigger the menu opens on. `right` for a menu that must not cover a side panel's rows. */
+export declare const NM_DROPDOWN_SIDE: {
+    readonly bottom: 'bottom';
+    readonly top: 'top';
+    readonly right: 'right';
+    readonly left: 'left';
+};
 /** Icon menus stay hidden until the host row or field is hovered or focused. */
 export declare const NM_DROPDOWN_REVEAL: {
     readonly hover: 'hover';

package/dist/ui/config/nm-icon-button.d.ts

@@ -1,3 +1,4 @@
+import { type NmControlShape } from './nm-shape.ts';
 export declare const NM_ICON_BUTTON_TONES: {
     readonly line: 'line';
     readonly raised: 'raised';
@@ -17,8 +18,9 @@ export declare const NM_ICON_BUTTON_CLASSES: {
     readonly solid: 'nm-icon-button--solid';
     readonly panel: 'nm-icon-button--panel';
     readonly invert: 'nm-icon-button--invert';
+    readonly round: 'nm-icon-button--round';
 };
 /** Shared geometry hook for send / stop / during-run primary composer actions. */
 export declare const NM_CHATBOX_ACTION_CLASS = "nm-chatbox__send";
-export declare function nmIconButtonClassName(tone?: NmIconButtonTone): string;
-export declare function nmChatboxActionButtonClassName(): string;
+export declare function nmIconButtonClassName(tone?: NmIconButtonTone, shape?: NmControlShape): string;
+export declare function nmChatboxActionButtonClassName(shape?: NmControlShape): string;

package/dist/ui/config/nm-shape.d.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 declare const NM_CONTROL_SHAPES: {
+    readonly soft: 'soft';
+    readonly round: 'round';
+};
+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 declare const NM_SHAPE_ATTRIBUTE = "data-button-shape";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "Nordman Interface Framework: the one UI and UX system for every Nordman product. Base UI, in the shadcn composition, styled by NIF tokens.",
   "type": "module",
   "sideEffects": [

package/registry/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.12",
+  "version": "0.2.13",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",
@@ -268,6 +268,7 @@
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-message.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -494,6 +495,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/bar-overflow.ts",
@@ -810,6 +812,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "kit-logger.ts",
         "lib/logger.ts",
         "lib/nm-motion.ts"
@@ -1137,6 +1140,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "kit-logger.ts",
         "lib/logger.ts"
       ],
@@ -1590,6 +1594,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -1803,6 +1808,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-side-panel.ts",
         "config/nm-small-icon-button.ts",
         "config/nordman-chrome.ts",
@@ -2311,6 +2317,7 @@
         "config/nm-composer.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-site-palette.ts",
         "config/nm-voice-orb.ts",
         "kit-logger.ts",
@@ -2677,6 +2684,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -3020,6 +3028,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-side-panel.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
@@ -3371,6 +3380,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -3579,6 +3589,7 @@
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-list-item.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -3770,6 +3781,7 @@
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-modal.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "content/nm-modal.ts",
         "kit-logger.ts",
@@ -4086,6 +4098,7 @@
         "config/nm-icons.ts",
         "config/nm-panel-bar.ts",
         "config/nm-segmented.ts",
+        "config/nm-shape.ts",
         "kit-logger.ts",
         "lib/logger.ts"
       ],
@@ -4313,6 +4326,7 @@
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-questionnaire.ts",
+        "config/nm-shape.ts",
         "config/nm-side-panel.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
@@ -4657,6 +4671,7 @@
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-segmented.ts",
+        "config/nm-shape.ts",
         "kit-logger.ts",
         "lib/logger.ts"
       ],
@@ -4972,6 +4987,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-side-panel.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -4997,6 +5013,10 @@
         "components/nm-chip/nm-chip.tsx",
         "components/nm-drawer/nm-drawer.css",
         "components/nm-drawer/nm-drawer.tsx",
+        "components/nm-dropdown-menu/nm-dropdown-menu.css",
+        "components/nm-dropdown-menu/nm-dropdown-menu.tsx",
+        "components/nm-dropdown/nm-dropdown-item.ts",
+        "components/nm-dropdown/nm-dropdown.css",
         "components/nm-icon/animated/activity.tsx",
         "components/nm-icon/animated/archive.tsx",
         "components/nm-icon/animated/arrow-down.tsx",
@@ -5144,6 +5164,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-sidebar.ts",
         "config/nm-small-icon-button.ts",
         "config/nordman-chrome.ts",
@@ -5161,6 +5182,8 @@
       "uses": [
         "chip",
         "drawer",
+        "dropdown",
+        "dropdown-menu",
         "icon",
         "input",
         "kbd",
@@ -5332,6 +5355,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-small-icon-button.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
@@ -5693,6 +5717,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-side-panel.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -5864,6 +5889,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "kit-logger.ts",
         "lib/logger.ts",
         "lib/nm-class.ts",
@@ -6041,6 +6067,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -6202,6 +6229,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-login.ts",
         "content/nordman-login.ts",
         "kit-logger.ts",
@@ -6383,6 +6411,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-login.ts",
         "content/nordman-login.ts",
         "kit-logger.ts",
@@ -6540,6 +6569,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "content/nordman-login.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -6704,6 +6734,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-login.ts",
         "content/nordman-login.ts",
         "kit-logger.ts",
@@ -6863,6 +6894,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-login.ts",
         "content/nordman-login.ts",
         "kit-logger.ts",
@@ -7035,6 +7067,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-login.ts",
         "content/nordman-login.ts",
         "kit-logger.ts",

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

@@ -30,6 +30,9 @@
     height: var(--control-h-lg);
   }
 
+  .nm-button--round {
+    border-radius: var(--nm-radius-round);
+  }
   .nm-button--block {
     width: 100%;
   }

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

@@ -7,6 +7,7 @@ import {
   type NmButtonSize,
   type NmButtonTone,
 } from '../../config/nm-button.ts';
+import { NM_CONTROL_SHAPES, type NmControlShape } from '../../config/nm-shape.ts';
 import { createLogger } from '../../kit-logger.ts';
 import { AnimateIcon, Button as MotionButton } from '../../lib/nm-motion.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
@@ -19,6 +20,8 @@ export type NmButtonProps = {
   children?: ReactNode;
   tone: NmButtonTone;
   size?: NmButtonSize;
+  /** Soft follows the themed radius; round is a pill. */
+  shape?: NmControlShape;
   block?: boolean;
   type?: 'button' | 'submit';
   disabled?: boolean;
@@ -34,12 +37,13 @@ export type NmButtonProps = {
 type NmButtonNativeProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof NmButtonProps | 'children' | 'aria-pressed'>;
 
 export const NmButton = forwardRef<HTMLButtonElement, NmButtonProps & NmButtonNativeProps>(function NmButton(props, ref): ReactNode {
-  const { label, children, tone, size: sizeProp, block, type, disabled, pressed, icon, iconOnly, testId, onClick, className: extra, ...rest } = props;
+  const { label, children, tone, size: sizeProp, shape, block, type, disabled, pressed, icon, iconOnly, testId, onClick, className: extra, ...rest } = props;
   const size = sizeProp ?? NM_BUTTON_SIZES.default;
   const className = [
     NM_BUTTON_CLASSES.root,
     NM_BUTTON_CLASSES[tone],
     NM_BUTTON_CLASSES[size],
+    shape === NM_CONTROL_SHAPES.round ? NM_BUTTON_CLASSES.round : null,
     block ? NM_BUTTON_CLASSES.block : null,
     iconOnly ? NM_BUTTON_CLASSES.icon : null,
     extra,

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

@@ -185,18 +185,25 @@
     outline: none;
   }
 
+  /* Send, Stop, Done and the voice button are the primary action: they take the theme accent. */
   .nm-composer__button--primary {
-    background: var(--nm-fg);
+    background: var(--nm-accent);
     color: var(--nm-canvas);
   }
 
   .nm-composer__button--primary:hover:not(:disabled),
   .nm-composer__button--primary:focus-visible {
-    background: var(--nm-fg);
+    background: var(--nm-accent);
     color: var(--nm-canvas);
     opacity: 0.88;
   }
 
+  /* Round shape: every button in the bar, the composer's own and any hosted icon button, is a circle. */
+  .nm-composer[data-button-shape='round'] .nm-composer__button,
+  .nm-composer[data-button-shape='round'] .nm-icon-button {
+    border-radius: var(--nm-radius-round);
+  }
+
   .nm-composer__button:disabled {
     cursor: default;
     opacity: 0.4;

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

@@ -6,7 +6,9 @@ import {
   NM_COMPOSER_INLINE_MARK as MARK,
   type NmComposerAttachment,
   type NmComposerQueued,
+  NM_COMPOSER_SHAPE_ATTRIBUTE,
 } from '../../config/nm-composer.ts';
+import type { NmControlShape } from '../../config/nm-shape.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { NmVoiceOrb } from '../nm-voice-orb/nm-voice-orb.tsx';
@@ -78,6 +80,8 @@ export type NmComposerProps = {
   formless?: boolean;
   /** The host owns the text: the field is not controlled by `value`, and `value` only says whether there is any. */
   uncontrolled?: boolean;
+  /** Shape of every button in the bar, own and hosted. Round makes them circles. */
+  buttonShape?: NmControlShape;
 };
 
 type InlinePart = { kind: 'text'; value: string } | { kind: 'chip'; label: string; occurrence: number };
@@ -337,7 +341,7 @@ export function NmComposer(props: NmComposerProps): ReactNode {
     );
   } else {
     action = (
-      <button type="button" className={C.button} aria-label={COPY.voice} data-testid="voice-button" disabled={props.disabled} onClick={props.onVoice}>
+      <button type="button" className={`${C.button} ${C.primary}`} aria-label={COPY.voice} data-testid="voice-button" disabled={props.disabled} onClick={props.onVoice}>
         <NmIcon id="audio-lines" />
       </button>
     );
@@ -348,6 +352,7 @@ export function NmComposer(props: NmComposerProps): ReactNode {
     <Root
       ref={rootRef as never}
       className={C.root}
+      {...{ [NM_COMPOSER_SHAPE_ATTRIBUTE]: props.buttonShape }}
       data-disabled={props.disabled ? 'true' : undefined}
       data-testid={props.testId}
       {...(props.formless

package/registry/ui/components/nm-dropdown/nm-dropdown-item.ts

@@ -14,6 +14,8 @@ export type NmDropdownItem = {
   danger?: boolean;
   disabled?: boolean;
   checked?: boolean;
+  /** The row that is the current choice in a list of alternatives. Shown by fill, not by a mark; for a toggle use `checked`. */
+  current?: boolean;
   /** Publish row state. The row stays inactive while busy or live. */
   mark?: 'idle' | 'busy' | 'live';
   children?: readonly NmDropdownItem[];

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

@@ -4,6 +4,7 @@ import {
   NM_DROPDOWN_ALIGN,
   NM_DROPDOWN_CLASSES,
   NM_DROPDOWN_REVEAL,
+  NM_DROPDOWN_SIDE,
   NM_DROPDOWN_TONE,
   NM_DROPDOWN_TRIGGER,
 } from '../../config/nm-dropdown.ts';
@@ -46,6 +47,7 @@ export type NmDropdownProps = {
   trigger?: (typeof NM_DROPDOWN_TRIGGER)[keyof typeof NM_DROPDOWN_TRIGGER];
   tone?: (typeof NM_DROPDOWN_TONE)[keyof typeof NM_DROPDOWN_TONE];
   align?: (typeof NM_DROPDOWN_ALIGN)[keyof typeof NM_DROPDOWN_ALIGN];
+  side?: (typeof NM_DROPDOWN_SIDE)[keyof typeof NM_DROPDOWN_SIDE];
   icon?: NmIconId;
   imageSrc?: string;
   displayLabel?: string;
@@ -57,6 +59,8 @@ export type NmDropdownProps = {
   /** `hover` hides the trigger until the host with `data-nm-menu` is hovered or focused. */
   reveal?: (typeof NM_DROPDOWN_REVEAL)[keyof typeof NM_DROPDOWN_REVEAL];
   open?: boolean;
+  /** Opens when the trigger is hovered, as well as on click. */
+  openOnHover?: boolean;
   triggerClassName?: string;
   triggerRef?: Ref<HTMLButtonElement>;
   onOpenChange?: (open: boolean) => void;
@@ -173,8 +177,8 @@ export function NmDropdown(props: NmDropdownProps): ReactNode {
       data-reveal={props.reveal}
     >
       <NmDropdownMenu open={open} onOpenChange={setOpen}>
-        <NmDropdownMenuTrigger render={triggerElement} />
-        <NmDropdownMenuContent align={props.align === NM_DROPDOWN_ALIGN.end ? 'end' : 'start'}>
+        <NmDropdownMenuTrigger render={triggerElement} openOnHover={props.openOnHover} />
+        <NmDropdownMenuContent align={props.align === NM_DROPDOWN_ALIGN.end ? 'end' : 'start'} side={props.side}>
           <NmDropdownMenuItems
             items={items}
             selected={props.selected}

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

@@ -70,6 +70,17 @@
     background: var(--nm-line);
   }
 
+  .nm-menu__item[data-current] {
+    background: var(--nm-line);
+    color: var(--nm-fg);
+  }
+  .nm-menu__item[data-current] .nm-icon {
+    color: var(--nm-fg);
+  }
+  .nm-menu__item[data-current]:hover,
+  .nm-menu__item[data-current][data-highlighted] {
+    background: var(--nm-raised);
+  }
   .nm-menu__item[data-disabled] {
     pointer-events: none;
     opacity: 0.5;