@nordmanai/nif 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,190 @@
+  /* The panel: framed, with the search on top, then filters, then the list. */
+  .nm-command {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-24);
+    width: 100%;
+    padding: var(--nm-space-12) var(--nm-space-24) var(--nm-space-24);
+    overflow: hidden;
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+  }
+
+  .nm-command-dialog .nm-command {
+    border: 0;
+    border-radius: 0;
+  }
+
+  .nm-command-dialog__header {
+    position: absolute;
+    width: var(--nm-rule);
+    height: var(--nm-rule);
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  .nm-command__search {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    box-sizing: border-box;
+    height: calc(var(--control-h) * 1.5);
+    padding: 0 var(--nm-space-4);
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-command__input {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--nm-fg);
+    font: inherit;
+    outline: none;
+  }
+
+  .nm-command__input::placeholder {
+    color: var(--nm-fg-muted);
+    opacity: 1;
+  }
+
+  .nm-command__clear {
+    display: inline-flex;
+    padding: var(--nm-space-4);
+    border: 0;
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    color: var(--nm-fg-subtle);
+    cursor: pointer;
+  }
+
+  .nm-command__clear:hover,
+  .nm-command__clear:focus-visible {
+    background: var(--nm-inset);
+    color: var(--nm-fg);
+    outline: none;
+  }
+
+  .nm-command__filters {
+    display: flex;
+    gap: var(--nm-space-8);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .nm-command__list {
+    display: flex;
+    flex-direction: column;
+    max-height: var(--nm-height-command);
+    margin: calc(var(--nm-space-12) * -1) 0 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+
+  [cmdk-list-sizer] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+  }
+
+  .nm-command__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+  }
+
+  /* cmdk hides a group with no match by setting hidden. The flex display above must not undo it. */
+  .nm-command__group[hidden] {
+    display: none;
+  }
+
+  [cmdk-group-heading] {
+    padding: var(--nm-space-6);
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  [cmdk-group-items] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+  }
+
+  .nm-command__item {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    box-sizing: border-box;
+    min-height: calc(var(--control-h-lg) + var(--nm-space-2));
+    padding: var(--nm-space-12);
+    border-radius: var(--nm-control-r);
+    color: var(--nm-fg);
+    font-weight: var(--nm-weight-medium);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .nm-command__item[data-selected='true'] {
+    background: var(--nm-line);
+  }
+
+  .nm-command__item[data-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .nm-command__item > .nm-icon {
+    flex-shrink: 0;
+    color: var(--nm-fg-muted);
+  }
+
+  .nm-command__actions {
+    display: none;
+    margin-left: auto;
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-command__item[data-selected='true'] .nm-command__actions {
+    display: inline-flex;
+  }
+
+  .nm-command__shortcut {
+    margin-left: auto;
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-regular);
+    letter-spacing: var(--nm-track);
+  }
+
+  .nm-command__separator {
+    height: var(--nm-rule);
+    background: var(--nm-line);
+  }
+
+  .nm-command__empty,
+  .nm-command__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--nm-space-8);
+    padding: var(--nm-space-24) 0;
+    color: var(--nm-fg-muted);
+  }
+
+  .nm-command__spinner {
+    animation: nm-command-spin 1s linear infinite;
+  }
+
+  @keyframes nm-command-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }

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

@@ -0,0 +1,125 @@
+import { NmChip } from '../nm-chip/nm-chip.tsx';
+import { useState, type ComponentProps, type ReactNode } from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { nmClass } from '../../lib/nm-class.ts';
+import { NmDialog, NmDialogContent, NmDialogDescription, NmDialogHeader, NmDialogTitle } from '../nm-dialog/nm-dialog.tsx';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+/**
+ * Command: search and run. The shadcn Command composition on cmdk, which gives filtering, arrow-key
+ * navigation and the listbox roles. Everything you see is NIF tokens.
+ */
+export function NmCommand({ className, ...props }: ComponentProps<typeof CommandPrimitive>) {
+  return <CommandPrimitive data-slot="command" className={nmClass('nm-command', className)} {...props} />;
+}
+
+export function NmCommandDialog({
+  title = 'Command palette',
+  description = 'Search for a command to run',
+  children,
+  ...props
+}: Omit<ComponentProps<typeof NmDialog>, 'children'> & { title?: string; description?: string; children: ReactNode }) {
+  return (
+    <NmDialog {...props}>
+      <NmDialogContent className="nm-command-dialog">
+        <NmDialogHeader className="nm-command-dialog__header">
+          <NmDialogTitle>{title}</NmDialogTitle>
+          <NmDialogDescription>{description}</NmDialogDescription>
+        </NmDialogHeader>
+        {children}
+      </NmDialogContent>
+    </NmDialog>
+  );
+}
+
+/** The search row: an icon, the field and a clear button once there is text. */
+export function NmCommandInput({ className, value, defaultValue, onValueChange, clearLabel = 'Clear', ...props }: ComponentProps<typeof CommandPrimitive.Input> & { clearLabel?: string; defaultValue?: string }) {
+  const [inner, setInner] = useState(defaultValue ?? '');
+  const text = value ?? inner;
+  const set = (next: string) => {
+    setInner(next);
+    onValueChange?.(next);
+  };
+  return (
+    <div data-slot="command-input-wrapper" className="nm-command__search">
+      <NmIcon id="search" />
+      <CommandPrimitive.Input data-slot="command-input" value={text} onValueChange={set} className={nmClass('nm-command__input', className)} {...props} />
+      {text !== '' ? (
+        <button type="button" className="nm-command__clear" aria-label={clearLabel} onClick={() => set('')}>
+          <NmIcon id="x" />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+/** Chips that narrow the list to one kind of result. */
+export function NmCommandFilters({
+  items,
+  value,
+  onValueChange,
+  label = 'Filter results',
+}: {
+  items: readonly { id: string; label: string }[];
+  value: string;
+  onValueChange: (id: string) => void;
+  label?: string;
+}) {
+  return (
+    <div data-slot="command-filters" className="nm-command__filters" role="tablist" aria-label={label}>
+      {items.map((item) => (
+        <NmChip
+          key={item.id}
+          role="tab"
+          aria-selected={item.id === value}
+          selected={item.id === value}
+          onClick={() => onValueChange(item.id)}
+        >
+          {item.label}
+        </NmChip>
+      ))}
+    </div>
+  );
+}
+
+export function NmCommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>) {
+  return <CommandPrimitive.List data-slot="command-list" className={nmClass('nm-command__list', className)} {...props} />;
+}
+
+export function NmCommandEmpty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>) {
+  return <CommandPrimitive.Empty data-slot="command-empty" className={nmClass('nm-command__empty', className)} {...props} />;
+}
+
+export function NmCommandLoading({ className, children, ...props }: ComponentProps<typeof CommandPrimitive.Loading>) {
+  return (
+    <CommandPrimitive.Loading data-slot="command-loading" className={nmClass('nm-command__loading', className)} {...props}>
+      <NmIcon id="loader" className="nm-command__spinner" />
+      {children}
+    </CommandPrimitive.Loading>
+  );
+}
+
+export function NmCommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>) {
+  return <CommandPrimitive.Group data-slot="command-group" className={nmClass('nm-command__group', className)} {...props} />;
+}
+
+export function NmCommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>) {
+  return <CommandPrimitive.Separator data-slot="command-separator" className={nmClass('nm-command__separator', className)} {...props} />;
+}
+
+export function NmCommandItem({ className, children, ...props }: ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item data-slot="command-item" className={nmClass('nm-command__item', className)} {...props}>
+      {children}
+    </CommandPrimitive.Item>
+  );
+}
+
+/** Shown on the right of an item, and only while the item is selected. */
+export function NmCommandItemActions({ className, ...props }: ComponentProps<'span'>) {
+  return <span data-slot="command-item-actions" className={nmClass('nm-command__actions', className)} {...props} />;
+}
+
+export function NmCommandShortcut({ className, ...props }: ComponentProps<'span'>) {
+  return <span data-slot="command-shortcut" className={nmClass('nm-command__shortcut', className)} {...props} />;
+}

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

@@ -0,0 +1,178 @@
+  .nm-composer {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-24);
+    width: 100%;
+    padding: var(--nm-space-12);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+  }
+
+  .nm-composer:focus-within {
+    border-color: var(--nm-stroke);
+  }
+
+  .nm-composer[data-disabled='true'] {
+    opacity: 0.6;
+  }
+
+  .nm-composer__main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+  }
+
+  .nm-composer__attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-composer__field {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    --nm-composer-line: calc(var(--nm-space-16) + var(--nm-space-4));
+    min-height: var(--nm-composer-line);
+    max-height: calc(var(--nm-composer-line) * 8);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--nm-fg);
+    font: inherit;
+    line-height: var(--nm-composer-line);
+    outline: none;
+    resize: none;
+    field-sizing: content;
+  }
+
+  .nm-composer__field::placeholder {
+    color: var(--nm-fg-muted);
+    opacity: 1;
+  }
+
+  .nm-composer__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nm-space-24);
+  }
+
+  .nm-composer__start,
+  .nm-composer__end {
+    display: flex;
+    align-items: center;
+    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;
+  }
+
+  .nm-composer__button--primary {
+    background: var(--nm-fg);
+    color: var(--nm-canvas);
+  }
+
+  .nm-composer__button--primary:hover:not(:disabled),
+  .nm-composer__button--primary:focus-visible {
+    background: var(--nm-fg);
+    color: var(--nm-canvas);
+    opacity: 0.88;
+  }
+
+  .nm-composer__button:disabled {
+    cursor: default;
+    opacity: 0.4;
+  }
+
+  .nm-composer__stop-mark {
+    display: block;
+    width: 60%;
+    height: 60%;
+    border-radius: var(--nm-radius-sm);
+    background: currentColor;
+  }
+
+  /* Queued messages stack above the text, inside the same frame, dimmed until their turn. */
+  .nm-composer__queue {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0 0 var(--nm-space-12);
+    list-style: none;
+    border-bottom: var(--nm-rule) solid var(--nm-line);
+  }
+
+  .nm-composer__queued {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-12);
+    padding: var(--nm-space-4) 0;
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-composer__queued > .nm-icon {
+    flex-shrink: 0;
+  }
+
+  .nm-composer__queued-text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nm-composer__queued-actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--nm-space-4);
+    opacity: 0;
+    transition: opacity 0.12s;
+  }
+
+  .nm-composer__queued:hover .nm-composer__queued-actions,
+  .nm-composer__queued:focus-within .nm-composer__queued-actions {
+    opacity: 1;
+  }
+
+  /* A notice card and the composer, one above the other. */
+  .nm-composer-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-8);
+    width: 100%;
+  }

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

@@ -0,0 +1,151 @@
+import { NmChip } from '../nm-chip/nm-chip.tsx';
+import { useRef, type KeyboardEvent, type ReactNode } from 'react';
+import {
+  NM_COMPOSER_CLASSES as C,
+  NM_COMPOSER_COPY as COPY,
+  type NmComposerAttachment,
+  type NmComposerQueued,
+} from '../../config/nm-composer.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+export type NmComposerProps = {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: () => void;
+  /** While the agent answers, the send button becomes Stop. */
+  busy?: boolean;
+  onStop?: () => void;
+  placeholder?: string;
+  /** A card shown above the box, such as a usage warning. It stacks directly over the frame. */
+  notice?: ReactNode;
+  /** Messages waiting for the agent to finish. They stack above the text, oldest first. */
+  queue?: readonly NmComposerQueued[];
+  onEditQueued?: (id: string) => void;
+  onRemoveQueued?: (id: string) => void;
+  attachments?: readonly NmComposerAttachment[];
+  onRemoveAttachment?: (id: string) => void;
+  /** The add button on the left. Omit it to hide the button. */
+  onAdd?: () => void;
+  /** Dictation. Pressed while it listens. */
+  onMic?: () => void;
+  micActive?: boolean;
+  /** Voice mode. It shows while the box is empty. Typing swaps it for Send. */
+  onVoice?: () => 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;
+  testId?: string;
+};
+
+export function NmComposer(props: NmComposerProps): ReactNode {
+  const field = useRef<HTMLTextAreaElement>(null);
+  const hasText = props.value.trim() !== '';
+
+  function send(): void {
+    // While the agent answers, Enter still sends. The host puts the message in the queue.
+    if (props.disabled || !hasText) {
+      return;
+    }
+    props.onSend();
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLTextAreaElement>): void {
+    if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
+      event.preventDefault();
+      send();
+    }
+  }
+
+  let action: ReactNode;
+  if (props.busy) {
+    action = (
+      <button type="button" className={`${C.button} ${C.primary}`} aria-label={COPY.stop} onClick={props.onStop}>
+        <span className={C.stopMark} />
+      </button>
+    );
+  } else if (hasText || props.onVoice == null) {
+    action = (
+      <button type="submit" className={`${C.button} ${C.primary}`} aria-label={COPY.send} disabled={props.disabled || !hasText}>
+        <NmIcon id="send" />
+      </button>
+    );
+  } else {
+    action = (
+      <button type="button" className={C.button} aria-label={COPY.voice} disabled={props.disabled} onClick={props.onVoice}>
+        <NmIcon id="audio-lines" />
+      </button>
+    );
+  }
+
+  const form = (
+    <form
+      className={C.root}
+      data-disabled={props.disabled ? 'true' : undefined}
+      data-testid={props.testId}
+      onSubmit={(event) => {
+        event.preventDefault();
+        send();
+      }}
+    >
+      <div className={C.main}>
+      {props.queue && props.queue.length > 0 ? (
+        <ul className={C.queue} aria-label={COPY.queued}>
+          {props.queue.map((q) => (
+            <li key={q.id} className={C.queued}>
+              <NmIcon id="chat-dashed" />
+              <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>
+                ) : null}
+                <button type="button" className={C.button} aria-label={COPY.removeQueued} onClick={() => props.onRemoveQueued?.(q.id)}><NmIcon id="x" /></button>
+              </span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {props.attachments && props.attachments.length > 0 ? (
+        <div className={C.attachments}>
+          {props.attachments.map((a) => (
+            <NmChip key={a.id} tone="outline" icon="file-text" removeLabel={COPY.remove(a.name)} onRemove={() => props.onRemoveAttachment?.(a.id)}>
+              {a.name}
+            </NmChip>
+          ))}
+        </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}
+      />
+      </div>
+      <div className={C.bar}>
+        <div className={C.start}>
+          {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}
+        </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}>
+              <NmIcon id="mic" />
+            </button>
+          ) : null}
+          {action}
+        </div>
+      </div>
+    </form>
+  );
+  return props.notice != null ? <div className={C.stack}>{props.notice}{form}</div> : form;
+}

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

@@ -0,0 +1,25 @@
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/**
+ * Base UI Context Menu: the menu that opens on right click or long press. Its items are the dropdown menu parts
+ * (NmDropdownMenuItem, NmDropdownMenuSub, NmDropdownMenuCheckboxItem and the rest).
+ */
+export function NmContextMenu(props: ContextMenuPrimitive.Root.Props) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+/** The area that answers a right click. */
+export function NmContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" className={className as string} {...props} />;
+}
+
+export function NmContextMenuContent({ className, ...props }: ContextMenuPrimitive.Popup.Props) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner className="nm-menu__positioner">
+        <ContextMenuPrimitive.Popup data-slot="context-menu-content" className={nmClass('nm-menu', className as string)} {...props} />
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  );
+}