@nordmanai/nif 0.2.2 → 0.2.4

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

@@ -1,12 +1,17 @@
 import { NmChip } from '../nm-chip/nm-chip.tsx';
-import { useRef, type KeyboardEvent, type ReactNode } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode, type Ref, type RefObject, type TextareaHTMLAttributes } from 'react';
 import {
   NM_COMPOSER_CLASSES as C,
   NM_COMPOSER_COPY as COPY,
+  NM_COMPOSER_INLINE_MARK as MARK,
   type NmComposerAttachment,
   type NmComposerQueued,
 } from '../../config/nm-composer.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';
+import type { OrbAdapter } from 'orb-ui';
+import type { NmVoiceOrbAgentState } from '../../config/nm-voice-orb.ts';
 
 export type NmComposerProps = {
   value: string;
@@ -26,32 +31,264 @@ export type NmComposerProps = {
   onRemoveAttachment?: (id: string) => void;
   /** The add button on the left. Omit it to hide the button. */
   onAdd?: () => void;
-  /** Dictation. Pressed while it listens. */
+  /** Dictation. Starts listening. */
   onMic?: () => void;
-  micActive?: boolean;
-  /** Voice mode. It shows while the box is empty. Typing swaps it for Send. */
+  /** Listening: the field gives way to `listeningContent` (the waveform), and the bar offers Cancel and Done. */
+  listening?: boolean;
+  listeningContent?: ReactNode;
+  onCancelListening?: () => void;
+  onConfirmListening?: () => void;
+  /** Done was pressed and the text is being transcribed. */
+  confirming?: boolean;
+  /** Voice mode. The button shows while the box is empty. Typing swaps it for Send. */
   onVoice?: () => void;
+  /** Voice mode is running: the orb takes the place of the voice button and ends the session when pressed. */
+  voiceActive?: boolean;
+  voiceState?: NmVoiceOrbAgentState;
+  voiceAdapter?: OrbAdapter;
+  getInputVolume?: () => number;
+  getOutputVolume?: () => number;
+  onVoiceStop?: () => void;
+  /** The microphone in voice mode. */
+  voiceMuted?: boolean;
+  onVoiceMute?: () => void;
   /** Replaces the add button, for a menu of what to add. Give the trigger the composer button class. */
   addControl?: ReactNode;
   /** Controls beside the add button, such as the model selector. */
   start?: ReactNode;
   disabled?: boolean;
+  /** Something other than text can be sent, such as an attached file. */
+  sendable?: boolean;
   testId?: string;
+  /** Chips and pills that belong to the message, such as quotes, skills and connections. They sit above the field. */
+  header?: ReactNode;
+  /** Drawn over the field, for marks that follow the text. */
+  overlay?: ReactNode;
+  /**
+   * Inline chips. A chip sits in the text as its label between two NM_COMPOSER_INLINE_MARK characters,
+   * and is drawn as a NIF chip. This says which icon or mark, and which text, a label gets.
+   */
+  inlineChip?: (label: string) => { icon?: NmIconId; leading?: ReactNode; text?: string } | null;
+  /** More controls at the end of the bar, before the action, such as usage and dictation. */
+  end?: ReactNode;
+  /** The field's own ref and handlers (keys, paste, focus, composition), for a host that reads the text itself. */
+  fieldRef?: Ref<HTMLTextAreaElement>;
+  fieldProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'className' | 'rows' | 'placeholder' | 'disabled'>;
+  /** Render a div instead of a form, for a host that already sits inside one. Send is then a submit button of that form. */
+  formless?: boolean;
+  /** The host owns the text: the field is not controlled by `value`, and `value` only says whether there is any. */
+  uncontrolled?: boolean;
 };
 
+type InlinePart = { kind: 'text'; value: string } | { kind: 'chip'; label: string; occurrence: number };
+
+function splitInline(text: string): InlinePart[] {
+  const parts: InlinePart[] = [];
+  let last = 0;
+  let occurrence = 0;
+  for (const match of text.matchAll(new RegExp(`${MARK}([^${MARK}]*)${MARK}`, 'g'))) {
+    const index = match.index ?? 0;
+    if (index > last) {
+      parts.push({ kind: 'text', value: text.slice(last, index) });
+    }
+    parts.push({ kind: 'chip', label: match[1] ?? '', occurrence });
+    occurrence += 1;
+    last = index + match[0].length;
+  }
+  if (last < text.length) {
+    parts.push({ kind: 'text', value: text.slice(last) });
+  }
+  return parts;
+}
+
+let measuring: CanvasRenderingContext2D | null = null;
+
+/** How wide the field draws this text, so a chip can take exactly the room its label holds. */
+function textWidth(field: HTMLTextAreaElement, text: string): number {
+  measuring ??= document.createElement('canvas').getContext('2d');
+  if (measuring == null) {
+    return 0;
+  }
+  const style = getComputedStyle(field);
+  measuring.font = style.font || `${style.fontSize} sans-serif`;
+  return measuring.measureText(text).width;
+}
+
+/** The words with the chips drawn in them. The field's own text turns transparent so the two line up. */
+function NmComposerInline(props: { text: string; field: RefObject<HTMLTextAreaElement | null>; chip?: NmComposerProps['inlineChip'] }): ReactNode {
+  const mirror = useRef<HTMLDivElement>(null);
+  const [, settle] = useState(0);
+  const { field, text } = props;
+  /**
+   * The chip keeps its own size. The field holds the chip's label as text of about the same width, and whatever
+   * is left over goes after the chip, so the words that follow line up with the field's. A label of non-breaking
+   * spaces cut to the chip's width leaves almost nothing over.
+   */
+  useLayoutEffect(() => {
+    const area = field.current;
+    const layer = mirror.current;
+    if (area == null || layer == null) {
+      return;
+    }
+    for (const chip of layer.querySelectorAll<HTMLElement>('[data-token]')) {
+      chip.style.marginRight = '0px';
+      const room = textWidth(area, chip.dataset.token ?? '') - chip.getBoundingClientRect().width;
+      chip.style.marginRight = `${room}px`;
+    }
+  });
+  useEffect(() => {
+    const area = field.current;
+    const layer = mirror.current;
+    if (area == null || layer == null) {
+      return;
+    }
+    const sync = () => {
+      layer.scrollTop = area.scrollTop;
+    };
+    sync();
+    area.addEventListener('scroll', sync);
+    // The fonts may not be in when the chips first measure.
+    void document.fonts?.ready.then(() => settle((count) => count + 1));
+    return () => area.removeEventListener('scroll', sync);
+  }, [field, text]);
+  return (
+    <div ref={mirror} className={C.inline} aria-hidden="true">
+      {splitInline(text).map((part, index) => {
+        if (part.kind === 'text') {
+          return <span key={`t-${index}`}>{part.value}</span>;
+        }
+        // The field cannot break a line next to the mark, so the layer must not either.
+        const mark = props.chip?.(part.label);
+        return (
+          <NmChip
+            key={`c-${part.occurrence}`}
+            tone="neutral"
+            size="inline"
+            icon={mark?.icon}
+            leading={mark?.leading}
+            className={C.inlineChip}
+            data-token={part.label}
+            data-composer-link={part.occurrence}
+            data-testid="composer-link-chip"
+          >
+            {mark?.text ?? part.label.trim()}
+          </NmChip>
+        );
+      })}
+    </div>
+  );
+}
+
 export function NmComposer(props: NmComposerProps): ReactNode {
-  const field = useRef<HTMLTextAreaElement>(null);
-  const hasText = props.value.trim() !== '';
+  const ownField = useRef<HTMLTextAreaElement>(null);
+  const fieldNode = useRef<HTMLTextAreaElement | null>(null);
+  const bindField = useCallback(
+    (node: HTMLTextAreaElement | null) => {
+      fieldNode.current = node;
+      ownField.current = node;
+      const outer = props.fieldRef;
+      if (typeof outer === 'function') {
+        outer(node);
+      } else if (outer != null) {
+        (outer as { current: HTMLTextAreaElement | null }).current = node;
+      }
+    },
+    [props.fieldRef],
+  );
+  /**
+   * The field sizes itself to its text, and nothing else sets its height. The height is measured here and set in
+   * pixels, so it can move smoothly: the box stays where it is and grows from its top edge, one line at a time.
+   * While it grows the text is held at the top, so the lines do not slide.
+   */
+  const rootRef = useRef<HTMLElement | null>(null);
+  /**
+   * The box grows upward from its resting size. It says how far in `--nm-composer-grow`, on the page, so what sits
+   * above it, such as a greeting, can keep clear of it and move up by the same amount, frame by frame.
+   */
+  useEffect(() => {
+    const root = rootRef.current;
+    if (root == null || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const page = document.documentElement;
+    const probe = document.createElement('div');
+    probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;height:var(--nm-composer-rest)';
+    const report = () => {
+      root.append(probe);
+      const rest = probe.getBoundingClientRect().height;
+      probe.remove();
+      page.style.setProperty('--nm-composer-grow', `${Math.max(0, root.getBoundingClientRect().height - rest)}px`);
+    };
+    const watch = new ResizeObserver(report);
+    watch.observe(root);
+    report();
+    return () => {
+      watch.disconnect();
+      page.style.removeProperty('--nm-composer-grow');
+    };
+  }, []);
+  const settle = useRef(0);
+  const fit = useCallback(() => {
+    const area = fieldNode.current;
+    if (area == null) {
+      return;
+    }
+    const before = area.getBoundingClientRect().height;
+    area.style.transition = 'none';
+    area.style.height = 'auto';
+    const limit = parseFloat(getComputedStyle(area).maxHeight);
+    const wanted = Math.min(area.scrollHeight, Number.isFinite(limit) ? limit : area.scrollHeight);
+    area.style.height = `${before}px`;
+    void area.offsetHeight;
+    area.style.transition = '';
+    if (Math.abs(wanted - before) < 0.5) {
+      area.style.height = `${wanted}px`;
+      return;
+    }
+    area.style.overflowY = 'hidden';
+    area.scrollTop = 0;
+    area.style.height = `${wanted}px`;
+    window.clearTimeout(settle.current);
+    settle.current = window.setTimeout(() => {
+      area.style.overflowY = '';
+    }, 300);
+  }, []);
+  const hasInline = props.value.includes(MARK);
+  const hasText = props.value.replaceAll(MARK, '').replaceAll('\u2003', '').trim() !== '';
+  const canSend = hasText || props.sendable === true;
+
+  useLayoutEffect(fit, [fit, props.value, hasInline, props.listening]);
+  /** A narrower or wider box wraps the text differently, so the height is measured again. */
+  useEffect(() => {
+    const area = fieldNode.current;
+    if (area == null || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    let width = area.getBoundingClientRect().width;
+    const watch = new ResizeObserver(() => {
+      const next = area.getBoundingClientRect().width;
+      if (next !== width) {
+        width = next;
+        fit();
+      }
+    });
+    watch.observe(area);
+    return () => watch.disconnect();
+  }, [fit, props.listening]);
 
   function send(): void {
     // While the agent answers, Enter still sends. The host puts the message in the queue.
-    if (props.disabled || !hasText) {
+    if (props.disabled || !canSend) {
       return;
     }
     props.onSend();
   }
 
   function onKeyDown(event: KeyboardEvent<HTMLTextAreaElement>): void {
+    props.fieldProps?.onKeyDown?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
     if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
       event.preventDefault();
       send();
@@ -59,35 +296,68 @@ export function NmComposer(props: NmComposerProps): ReactNode {
   }
 
   let action: ReactNode;
-  if (props.busy) {
+  if (props.listening) {
     action = (
-      <button type="button" className={`${C.button} ${C.primary}`} aria-label={COPY.stop} onClick={props.onStop}>
+      <>
+        <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>
+      </>
+    );
+  } 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>
+    ) : (
+      <NmVoiceOrb
+        adapter={props.voiceAdapter}
+        agentState={props.voiceState ?? 'listening'}
+        onClick={props.onVoiceStop}
+        getInputVolume={props.getInputVolume}
+        getOutputVolume={props.getOutputVolume}
+        label={COPY.voiceEnd}
+        testId="voice-orb"
+      />
+    );
+  } else if (props.busy) {
+    action = (
+      <button type="button" className={`${C.button} ${C.primary}`} aria-label={COPY.stop} data-testid="stop-button" onClick={props.onStop}>
         <span className={C.stopMark} />
       </button>
     );
-  } else if (hasText || props.onVoice == null) {
+  } else if (canSend || props.onVoice == null) {
     action = (
-      <button type="submit" className={`${C.button} ${C.primary}`} aria-label={COPY.send} disabled={props.disabled || !hasText}>
+      <button type="submit" className={`${C.button} ${C.primary}`} aria-label={COPY.send} data-testid="send-button" disabled={props.disabled || !canSend}>
         <NmIcon id="send" />
       </button>
     );
   } else {
     action = (
-      <button type="button" className={C.button} aria-label={COPY.voice} disabled={props.disabled} onClick={props.onVoice}>
+      <button type="button" className={C.button} aria-label={COPY.voice} data-testid="voice-button" disabled={props.disabled} onClick={props.onVoice}>
         <NmIcon id="audio-lines" />
       </button>
     );
   }
 
+  const Root = props.formless ? 'div' : 'form';
   const form = (
-    <form
+    <Root
+      ref={rootRef as never}
       className={C.root}
       data-disabled={props.disabled ? 'true' : undefined}
       data-testid={props.testId}
-      onSubmit={(event) => {
-        event.preventDefault();
-        send();
-      }}
+      {...(props.formless
+        ? {}
+        : {
+            onSubmit: (event: { preventDefault: () => void }) => {
+              event.preventDefault();
+              send();
+            },
+          })}
     >
       <div className={C.main}>
       {props.queue && props.queue.length > 0 ? (
@@ -115,37 +385,55 @@ export function NmComposer(props: NmComposerProps): ReactNode {
           ))}
         </div>
       ) : null}
-      <textarea
-        ref={field}
-        className={C.field}
-        rows={1}
-        value={props.value}
-        placeholder={props.placeholder ?? COPY.placeholder}
-        aria-label={props.placeholder ?? COPY.placeholder}
-        disabled={props.disabled}
-        onChange={(event) => props.onChange(event.target.value)}
-        onKeyDown={onKeyDown}
-      />
+      {props.header}
+      <div className={C.fieldWrap} data-listening={props.listening ? 'true' : undefined}>
+        {props.overlay}
+        {hasInline ? <NmComposerInline text={props.value} field={fieldNode} chip={props.inlineChip} /> : null}
+        <textarea
+          aria-label={props.placeholder ?? COPY.placeholder}
+          {...props.fieldProps}
+          ref={bindField}
+          data-inline={hasInline ? 'true' : undefined}
+          className={C.field}
+          rows={1}
+          {...(props.uncontrolled ? {} : { value: props.value, onChange: (event: { target: { value: string } }) => props.onChange(event.target.value) })}
+          placeholder={props.placeholder ?? COPY.placeholder}
+          disabled={props.disabled}
+          onKeyDown={onKeyDown}
+          onInput={(event) => {
+            props.fieldProps?.onInput?.(event);
+            fit();
+          }}
+        />
+        {props.listening ? (
+          <div className={C.listening}>{props.listeningContent}</div>
+        ) : null}
+      </div>
       </div>
       <div className={C.bar}>
         <div className={C.start}>
-          {props.addControl ?? (props.onAdd ? (
+          {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>
           ) : null)}
-          {props.start}
+          {props.listening ? null : props.start}
         </div>
         <div className={C.end}>
-          {props.onMic ? (
-            <button type="button" className={C.button} aria-label={COPY.mic} aria-pressed={props.micActive === true} disabled={props.disabled} onClick={props.onMic}>
+          {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>
+          ) : 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>
           ) : null}
+          {props.listening ? null : props.end}
           {action}
         </div>
       </div>
-    </form>
+    </Root>
   );
   return props.notice != null ? <div className={C.stack}>{props.notice}{form}</div> : form;
 }

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

@@ -1,4 +1,4 @@
-import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
+import { ContextMenu as ContextMenuPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 /**

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

@@ -15,7 +15,10 @@
     position: fixed;
     z-index: var(--nm-menu-z);
     top: 20%;
-    left: 50%;
+    /* Centered with margins, not a transform: the motion popup owns transform. */
+    right: 0;
+    left: 0;
+    margin-inline: auto;
     box-sizing: border-box;
     width: min(var(--nm-width-dialog), calc(100% - var(--nm-space-24) * 2));
     max-height: 70%;
@@ -27,16 +30,12 @@
     font-family: var(--nm-font);
     font-size: var(--nm-type-ui);
     outline: none;
-    transform: translateX(-50%);
-    transition:
-      opacity 0.15s,
-      transform 0.15s;
+    transition: opacity 0.15s;
   }
 
   .nm-dialog[data-starting-style],
   .nm-dialog[data-ending-style] {
     opacity: 0;
-    transform: translateX(-50%) scale(0.98);
   }
 
   .nm-dialog__header {

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

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
-import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { Dialog as DialogPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 /** Base UI Dialog, in the shadcn composition, styled by NIF tokens. */

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

@@ -79,6 +79,7 @@
     flex-direction: column;
     gap: var(--nm-space-4);
     min-width: 13.5rem;
+    max-width: min(var(--nm-width-menu-max), calc(100vw - var(--nm-space-16) * 2));
     max-height: var(--nm-dropdown-max);
     margin: 0;
     padding: var(--nm-list-pad);
@@ -262,7 +263,11 @@
   }
 
   .nm-dropdown__item .nm-dropdown__label {
+    min-width: 0;
+    overflow: hidden;
     line-height: var(--nm-leading-tight);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .nm-dropdown__detail {