@nordmanai/nif 0.2.20 → 0.2.22

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

@@ -34,8 +34,6 @@ export declare const NM_COMPOSER_CLASSES: {
     readonly bar: 'nm-composer__bar';
     readonly start: 'nm-composer__start';
     readonly end: 'nm-composer__end';
-    readonly button: 'nm-composer__button';
-    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. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.20",
+  "version": "0.2.22",
   "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.19",
+  "version": "0.2.21",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",
@@ -2313,13 +2313,17 @@
         "components/nm-voice-orb/nm-voice-orb.css",
         "components/nm-voice-orb/nm-voice-orb.tsx",
         "components/nm-voice-orb/use-nm-voice-orb-theme.ts",
+        "components/nordman-icon-button/nordman-icon-button.css",
+        "components/nordman-icon-button/nordman-icon-button.tsx",
         "config/nm-appearance.ts",
         "config/nm-composer.ts",
+        "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-shape.ts",
         "config/nm-site-palette.ts",
         "config/nm-voice-orb.ts",
+        "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/appearance/cloudOrbAppearance.ts",
         "lib/appearance/color.ts",
@@ -2337,7 +2341,8 @@
       "uses": [
         "chip",
         "icon",
-        "voice-orb"
+        "voice-orb",
+        "nordman-icon-button"
       ]
     },
     "context-menu": {

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

@@ -155,60 +155,11 @@
     gap: var(--nm-space-8);
   }
 
-  /* 24px square at the default icon size: the icon plus the 6px micro-unit on each side. */
-  .nm-composer__button {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    box-sizing: content-box;
-    width: var(--nm-icon-button);
-    height: var(--nm-icon-button);
-    padding: calc(var(--nm-space-6) / 2);
-    border: 0;
-    border-radius: var(--nm-control-r);
-    background: transparent;
-    color: var(--nm-fg-muted);
-    cursor: pointer;
-  }
-
-  .nm-composer__button .nm-icon {
-    width: 100%;
-    height: 100%;
-  }
-
-  .nm-composer__button:hover:not(:disabled),
-  .nm-composer__button:focus-visible,
-  .nm-composer__button[aria-pressed='true'] {
-    background: var(--nm-inset);
-    color: var(--nm-fg);
-    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-accent);
-    color: var(--nm-canvas);
-  }
-
-  .nm-composer__button--primary:hover:not(:disabled),
-  .nm-composer__button--primary:focus-visible {
-    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,
+  /* Round shape: any icon button hosted in the bar is a circle. */
   .nm-composer[data-button-shape='round'] .nm-icon-button {
     border-radius: var(--nm-radius-round);
   }
 
-  .nm-composer__button:disabled {
-    cursor: default;
-    opacity: 0.4;
-  }
-
   .nm-composer__stop-mark {
     display: block;
     width: 60%;

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

@@ -1,5 +1,5 @@
 import { NmChip } from '../nm-chip/nm-chip.tsx';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode, type Ref, type RefObject, type TextareaHTMLAttributes } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ComponentProps, type KeyboardEvent, type ReactNode, type Ref, type RefObject, type TextareaHTMLAttributes } from 'react';
 import {
   NM_COMPOSER_CLASSES as C,
   NM_COMPOSER_COPY as COPY,
@@ -10,6 +10,8 @@ import {
 } from '../../config/nm-composer.ts';
 import type { NmControlShape } from '../../config/nm-shape.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
+import { NordmanIconButton } from '../nordman-icon-button/nordman-icon-button.tsx';
+import { NM_CHATBOX_ACTION_CLASS, NM_ICON_BUTTON_TONES } from '../../config/nm-icon-button.ts';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { NmVoiceOrb } from '../nm-voice-orb/nm-voice-orb.tsx';
 import type { OrbAdapter } from 'orb-ui';
@@ -183,6 +185,22 @@ function NmComposerInline(props: { text: string; field: RefObject<HTMLTextAreaEl
   );
 }
 
+type ComposerButtonProps = Omit<ComponentProps<typeof NordmanIconButton>, 'tone' | 'className'> & {
+  /** The primary action takes the theme accent, as the chatbox send does. */
+  primary?: boolean;
+};
+
+/** Every button in the bar is the NIF icon button, so it has the same size, padding and states as everywhere else. */
+function ComposerButton({ primary = false, ...props }: ComposerButtonProps) {
+  return (
+    <NordmanIconButton
+      {...props}
+      tone={primary ? NM_ICON_BUTTON_TONES.invert : NM_ICON_BUTTON_TONES.quiet}
+      className={primary ? NM_CHATBOX_ACTION_CLASS : undefined}
+    />
+  );
+}
+
 export function NmComposer(props: NmComposerProps): ReactNode {
   const ownField = useRef<HTMLTextAreaElement>(null);
   const fieldNode = useRef<HTMLTextAreaElement | null>(null);
@@ -303,19 +321,13 @@ export function NmComposer(props: NmComposerProps): ReactNode {
   if (props.listening) {
     action = (
       <>
-        <button type="button" className={C.button} aria-label={COPY.cancel} data-testid="dictation-cancel" disabled={props.disabled} onClick={props.onCancelListening}>
-          <NmIcon id="x" />
-        </button>
-        <button type="button" className={`${C.button} ${C.primary}`} aria-label={COPY.done} data-testid="dictation-confirm" data-loading={props.confirming ? 'true' : undefined} disabled={props.disabled || props.confirming} onClick={props.onConfirmListening}>
-          <NmIcon id={props.confirming ? 'loader' : 'check'} />
-        </button>
+        <ComposerButton glyph="x" label={COPY.cancel} testId="dictation-cancel" shape={props.buttonShape} disabled={props.disabled} onClick={props.onCancelListening} />
+        <ComposerButton primary glyph={props.confirming ? 'loader' : 'check'} label={COPY.done} testId="dictation-confirm" shape={props.buttonShape} busy={props.confirming} disabled={props.disabled || props.confirming} onClick={props.onConfirmListening} />
       </>
     );
   } else if (props.voiceActive && !canSend) {
     action = props.voiceState === 'connecting' ? (
-      <button type="button" className={C.button} aria-label={COPY.voiceEnd} data-testid="voice-orb-connecting" onClick={props.onVoiceStop}>
-        <NmIcon id="loader" />
-      </button>
+      <ComposerButton glyph="loader" label={COPY.voiceEnd} testId="voice-orb-connecting" shape={props.buttonShape} onClick={props.onVoiceStop} />
     ) : (
       <NmVoiceOrb
         adapter={props.voiceAdapter}
@@ -329,21 +341,17 @@ export function NmComposer(props: NmComposerProps): ReactNode {
     );
   } else if (props.busy) {
     action = (
-      <button type="button" className={`${C.button} ${C.primary}`} aria-label={COPY.stop} data-testid="stop-button" onClick={props.onStop}>
+      <ComposerButton primary label={COPY.stop} testId="stop-button" shape={props.buttonShape} onClick={props.onStop}>
         <span className={C.stopMark} />
-      </button>
+      </ComposerButton>
     );
   } else if (canSend || props.onVoice == null) {
     action = (
-      <button type="submit" className={`${C.button} ${C.primary}`} aria-label={COPY.send} data-testid="send-button" disabled={props.disabled || !canSend}>
-        <NmIcon id="send" />
-      </button>
+      <ComposerButton primary type="submit" glyph="send" label={COPY.send} testId="send-button" shape={props.buttonShape} disabled={props.disabled || !canSend} />
     );
   } else {
     action = (
-      <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>
+      <ComposerButton primary glyph="audio-lines" label={COPY.voice} testId="voice-button" shape={props.buttonShape} disabled={props.disabled} onClick={props.onVoice} />
     );
   }
 
@@ -373,9 +381,9 @@ export function NmComposer(props: NmComposerProps): ReactNode {
               <span className={C.queuedText}>{q.text}</span>
               <span className={C.queuedActions}>
                 {props.onEditQueued ? (
-                  <button type="button" className={C.button} aria-label={COPY.editQueued} onClick={() => props.onEditQueued?.(q.id)}><NmIcon id="pen" /></button>
+                  <ComposerButton glyph="pen" label={COPY.editQueued} shape={props.buttonShape} onClick={() => props.onEditQueued?.(q.id)} />
                 ) : null}
-                <button type="button" className={C.button} aria-label={COPY.removeQueued} onClick={() => props.onRemoveQueued?.(q.id)}><NmIcon id="x" /></button>
+                <ComposerButton glyph="x" label={COPY.removeQueued} shape={props.buttonShape} onClick={() => props.onRemoveQueued?.(q.id)} />
               </span>
             </li>
           ))}
@@ -418,21 +426,15 @@ export function NmComposer(props: NmComposerProps): ReactNode {
       <div className={C.bar}>
         <div className={C.start}>
           {props.listening ? null : props.addControl ?? (props.onAdd ? (
-            <button type="button" className={C.button} aria-label={COPY.attach} disabled={props.disabled} onClick={props.onAdd}>
-              <NmIcon id="plus" />
-            </button>
+            <ComposerButton glyph="plus" label={COPY.attach} shape={props.buttonShape} disabled={props.disabled} onClick={props.onAdd} />
           ) : null)}
           {props.listening ? null : props.start}
         </div>
         <div className={C.end}>
           {props.voiceActive && props.onVoiceMute ? (
-            <button type="button" className={C.button} aria-label={props.voiceMuted ? COPY.unmute : COPY.mute} aria-pressed={props.voiceMuted === true} data-testid="voice-mic-toggle" disabled={props.disabled} onClick={props.onVoiceMute}>
-              <NmIcon id={props.voiceMuted ? 'mic-off' : 'mic'} />
-            </button>
+            <ComposerButton glyph={props.voiceMuted ? 'mic-off' : 'mic'} label={props.voiceMuted ? COPY.unmute : COPY.mute} pressed={props.voiceMuted === true} testId="voice-mic-toggle" shape={props.buttonShape} disabled={props.disabled} onClick={props.onVoiceMute} />
           ) : props.onMic && !props.listening && !props.voiceActive ? (
-            <button type="button" className={C.button} aria-label={COPY.mic} disabled={props.disabled} onClick={props.onMic}>
-              <NmIcon id="mic" />
-            </button>
+            <ComposerButton glyph="mic" label={COPY.mic} shape={props.buttonShape} disabled={props.disabled} onClick={props.onMic} />
           ) : null}
           {props.listening ? null : props.end}
           {action}

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

@@ -327,6 +327,10 @@
     gap: var(--nm-space-8);
     padding: var(--nm-space-8);
   }
+  /* A group in the footer takes the footer's padding, so its rows line up with the rows above. */
+  .nm-sidebar__footer > .nm-sidebar__group {
+    padding: 0;
+  }
   .nm-sidebar__content {
     display: flex;
     flex: 1;

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

@@ -41,8 +41,6 @@ export const NM_COMPOSER_CLASSES = {
   bar: 'nm-composer__bar',
   start: 'nm-composer__start',
   end: 'nm-composer__end',
-  button: 'nm-composer__button',
-  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. */