@nordmanai/nif 0.2.1 → 0.2.3

package/registry/ui/components/nm-voice-orb/nm-voice-orb.tsx

@@ -0,0 +1,112 @@
+import { useMemo, type ReactNode } from 'react';
+import { Orb, type OrbAdapter, type OrbSignal, type OrbTheme } from 'orb-ui';
+import {
+  NM_VOICE_ORB_CLASSES,
+  NM_VOICE_ORB_SIZE,
+  toOrbUiState,
+  type NmVoiceOrbAgentState,
+} from '../../config/nm-voice-orb.ts';
+import { useNmVoiceOrbTheme } from './use-nm-voice-orb-theme.ts';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-voice-orb');
+
+export type NmVoiceOrbProps = {
+  adapter?: OrbAdapter;
+  signal?: OrbSignal;
+  agentState?: NmVoiceOrbAgentState;
+  theme?: OrbTheme;
+  size?: number;
+  inputVolume?: number;
+  outputVolume?: number;
+  getInputVolume?: () => number;
+  getOutputVolume?: () => number;
+  label?: string;
+  testId?: string;
+  onClick?: () => void;
+};
+
+function clamp01(value: number | undefined): number {
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    return 0;
+  }
+  return Math.min(1, Math.max(0, value));
+}
+
+function ensureMatchMedia(): void {
+  if (typeof window === 'undefined' || typeof window.matchMedia === 'function') {
+    return;
+  }
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    configurable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+}
+
+export function NmVoiceOrb(props: NmVoiceOrbProps): ReactNode {
+  ensureMatchMedia();
+  const appearanceTheme = useNmVoiceOrbTheme();
+
+  const {
+    signal,
+    adapter,
+    inputVolume: propInputVolume,
+    outputVolume: propOutputVolume,
+    getInputVolume,
+    getOutputVolume,
+  } = props;
+  const mappedState = toOrbUiState(props.agentState);
+  const fallbackSignal = useMemo<OrbSignal | undefined>(() => {
+    if (signal) {
+      return signal;
+    }
+    if (adapter) {
+      return undefined;
+    }
+    const inputVolume = clamp01(propInputVolume ?? getInputVolume?.() ?? 0);
+    const outputVolume = clamp01(
+      propOutputVolume ?? getOutputVolume?.() ?? (mappedState === 'speaking' ? 0.72 : 0),
+    );
+    return {
+      state: mappedState,
+      inputVolume,
+      outputVolume,
+    };
+  }, [
+    mappedState,
+    adapter,
+    getInputVolume,
+    getOutputVolume,
+    propInputVolume,
+    propOutputVolume,
+    signal,
+  ]);
+
+  logger.debug('render', 'orb-ui', { state: mappedState });
+
+  return (
+    <Orb
+      adapter={props.adapter}
+      signal={fallbackSignal}
+      state={props.agentState != null ? mappedState : undefined}
+      theme={props.theme ?? appearanceTheme}
+      size={props.size ?? NM_VOICE_ORB_SIZE}
+      className={NM_VOICE_ORB_CLASSES.root}
+      aria-label={props.label ?? 'Avsluta röstläge'}
+      onStart={props.onClick}
+      onStop={props.onClick}
+      data-testid={props.testId ?? 'voice-orb'}
+      data-agent-state={props.agentState ?? mappedState}
+    />
+  );
+}

package/registry/ui/components/nm-voice-orb/use-nm-voice-orb-theme.ts

@@ -0,0 +1,34 @@
+import { useEffect, useMemo, useState } from 'react';
+import { defineOrbTheme, type OrbTheme } from 'orb-ui';
+import { deriveCloudOrbAppearance } from '../../lib/appearance/cloudOrbAppearance.ts';
+import { NM_APPEARANCE_APPLIED_EVENT } from '../../config/nm-appearance.ts';
+import { NM_ORB_UI_THEME } from '../../config/nm-voice-orb.ts';
+
+function readAppearanceChannel(name: string, fallback: string): string {
+  if (typeof document === 'undefined') {
+    return fallback;
+  }
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value.length > 0 ? value : fallback;
+}
+
+export function useNmVoiceOrbTheme(): OrbTheme {
+  const [revision, setRevision] = useState(0);
+
+  useEffect(() => {
+    const sync = () => setRevision((value) => value + 1);
+    window.addEventListener(NM_APPEARANCE_APPLIED_EVENT, sync);
+    return () => window.removeEventListener(NM_APPEARANCE_APPLIED_EVENT, sync);
+  }, []);
+
+  return useMemo(() => {
+    void revision;
+    const accent = readAppearanceChannel('--nm-accent', '#D2BB9C');
+    const canvas = readAppearanceChannel('--nm-canvas', '#000000');
+    const fg = readAppearanceChannel('--nm-fg', '#FFFFFF');
+    return defineOrbTheme({
+      ...NM_ORB_UI_THEME,
+      appearance: deriveCloudOrbAppearance(accent, canvas, fg),
+    });
+  }, [revision]);
+}

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

@@ -30,8 +30,10 @@
     cursor: default;
   }
 
+  /* Raised sits on a surface of its own with an edge, so it reads on any background. Panel has no edge. */
   .nm-icon-button--raised {
     background: var(--nm-raised);
+    box-shadow: inset 0 0 0 var(--nm-rule) var(--nm-line-strong);
   }
 
   .nm-icon-button--quiet {
@@ -39,6 +41,10 @@
     color: var(--nm-fg-subtle);
   }
 
+  .nm-icon-button--quiet[data-active='true'] {
+    color: var(--nm-fg);
+  }
+
   .nm-icon-button--quiet.nm-icon-button--active:not(:disabled) {
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -61,15 +67,6 @@
     color: var(--nm-canvas);
   }
 
-  .nm-icon-button--subtle {
-    background: transparent;
-    color: var(--nm-fg-subtle);
-  }
-
-  .nm-icon-button--subtle[data-active='true'] {
-    color: var(--nm-fg);
-  }
-
   .nm-icon-button--panel,
   .nm-icon-button--panel:hover:not(:disabled):not([aria-disabled='true']),
   .nm-icon-button--panel:focus-visible:not(:disabled):not([aria-disabled='true']) {

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

@@ -7,6 +7,7 @@ import {
 } from '../../config/nm-icon-button.ts';
 import { NORDMAN_CHROME_ICONS, type NordmanChromeIconId } from '../../config/nordman-chrome.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';
 
 const logger = createLogger('interface-nordman-icon-button');
@@ -174,11 +175,14 @@ export const NordmanIconButton = forwardRef<HTMLButtonElement, NordmanIconButton
         </a>
       );
     }
-    return (
-      <button {...rest} {...shared} ref={ref} type={type ?? 'button'}>
+    const button = (
+      <MotionButton {...(rest as object)} {...shared} ref={ref} type={type ?? 'button'} hoverScale={rest.disabled ? 1 : 1.08} tapScale={rest.disabled ? 1 : 0.92}>
         {face}
-      </button>
+      </MotionButton>
     );
+    // The icon plays its animation when the button is hovered.
+    // Always wrapped: a control that swaps its glyph for an image must stay the same element.
+    return <AnimateIcon animateOnHover={glyph != null} asChild>{button}</AnimateIcon>;
   },
 );
 

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

@@ -4,6 +4,10 @@ export const NM_BUTTON_TONES = {
   muted: 'muted',
   panel: 'panel',
   danger: 'danger',
+  /** No fill until hovered. For actions that sit inside other content. */
+  ghost: 'ghost',
+  /** Text with an underline on hover. */
+  link: 'link',
 } as const;
 
 export type NmButtonTone = (typeof NM_BUTTON_TONES)[keyof typeof NM_BUTTON_TONES];
@@ -24,6 +28,8 @@ export const NM_BUTTON_CLASSES = {
   muted: 'nm-button--muted',
   panel: 'nm-button--panel',
   danger: 'nm-button--danger',
+  ghost: 'nm-button--ghost',
+  link: 'nm-button--link',
   default: 'nm-button--default',
   compact: 'nm-button--compact',
   chip: 'nm-button--chip',

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

@@ -7,6 +7,11 @@ export const NM_COMPOSER_COPY = {
   attach: 'Add',
   mic: 'Dictate',
   voice: 'Voice mode',
+  voiceEnd: 'End voice mode',
+  mute: 'Mute microphone',
+  unmute: 'Unmute microphone',
+  cancel: 'Cancel',
+  done: 'Done',
   send: 'Send',
   stop: 'Stop',
   remove: (name: string) => `Remove ${name}`,
@@ -15,6 +20,9 @@ export const NM_COMPOSER_COPY = {
   removeQueued: 'Remove queued message',
 } as const;
 
+/** Wraps an inline chip's label inside the field text. */
+export const NM_COMPOSER_INLINE_MARK = '\u2060';
+
 export const NM_COMPOSER_CLASSES = {
   root: 'nm-composer',
   stack: 'nm-composer-stack',
@@ -25,6 +33,10 @@ export const NM_COMPOSER_CLASSES = {
   queuedActions: 'nm-composer__queued-actions',
   attachments: 'nm-composer__attachments',
   field: 'nm-composer__field',
+  listening: 'nm-composer__listening',
+  fieldWrap: 'nm-composer__field-wrap',
+  inline: 'nm-composer__inline',
+  inlineChip: 'nm-composer__inline-chip',
   bar: 'nm-composer__bar',
   start: 'nm-composer__start',
   end: 'nm-composer__end',

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

@@ -3,7 +3,6 @@ export const NM_ICON_BUTTON_TONES = {
   raised: 'raised',
   quiet: 'quiet',
   solid: 'solid',
-  subtle: 'subtle',
   panel: 'panel',
   invert: 'invert',
 } as const;
@@ -18,7 +17,6 @@ export const NM_ICON_BUTTON_CLASSES = {
   raised: 'nm-icon-button--raised',
   quiet: 'nm-icon-button--quiet',
   solid: 'nm-icon-button--solid',
-  subtle: 'nm-icon-button--subtle',
   panel: 'nm-icon-button--panel',
   invert: 'nm-icon-button--invert',
 } as const;

package/registry/ui/config/nm-icons-extended.ts

@@ -0,0 +1,141 @@
+/* Generated by scripts/extend-icons.mjs. Lucide icons NIF products use beyond the core set. */
+export const NM_EXTENDED_ICON_IDS = [
+  'activity',
+  'app-window',
+  'archive-restore',
+  'arrow-down',
+  'arrow-left-right',
+  'arrow-right-left',
+  'arrow-up-down',
+  'arrow-up-left',
+  'ban',
+  'beaker',
+  'bitcoin',
+  'bone',
+  'book-copy',
+  'bookmark',
+  'bookmark-plus',
+  'calendar-days',
+  'chart-column',
+  'chart-column-increasing',
+  'chart-line',
+  'check-check',
+  'chevron-left',
+  'chevron-right',
+  'chevron-up',
+  'chevrons-up-down',
+  'circle',
+  'circle-alert',
+  'circle-check-big',
+  'circle-dashed',
+  'circle-dot',
+  'circle-plus',
+  'circle-question-mark',
+  'circle-x',
+  'clock-3',
+  'clock-4',
+  'cloud-sun',
+  'code-xml',
+  'copy-check',
+  'corner-down-right',
+  'database',
+  'dices',
+  'earth',
+  'external-link',
+  'eye',
+  'eye-off',
+  'fast-forward',
+  'feather',
+  'file-clock',
+  'file-code',
+  'file-image',
+  'file-json',
+  'file-pen-line',
+  'file-plus-2',
+  'file-question-mark',
+  'file-search',
+  'file-spreadsheet',
+  'file-type-2',
+  'file-up',
+  'file-x-2',
+  'files',
+  'film',
+  'folder-kanban',
+  'funnel-x',
+  'git-branch-plus',
+  'git-commit-horizontal',
+  'git-fork',
+  'graduation-cap',
+  'grip-vertical',
+  'history',
+  'image-off',
+  'image-up',
+  'info',
+  'key-round',
+  'keyboard',
+  'laptop',
+  'layers',
+  'layout-dashboard',
+  'library',
+  'life-buoy',
+  'lightbulb',
+  'link',
+  'link-2-off',
+  'list',
+  'list-tree',
+  'map-pin',
+  'message-circle-question-mark',
+  'message-square',
+  'message-square-plus',
+  'message-square-text',
+  'messages-square',
+  'minimize-2',
+  'mouse-pointer-click',
+  'newspaper',
+  'notebook-pen',
+  'octagon-pause',
+  'paperclip',
+  'pen-line',
+  'pen-tool',
+  'pin-off',
+  'plane-takeoff',
+  'plug-zap',
+  'qr-code',
+  'radio',
+  'refresh-cw',
+  'rocket',
+  'rotate-cw',
+  'scale',
+  'scan-search',
+  'scroll-text',
+  'send',
+  'share-2',
+  'shield',
+  'shield-check',
+  'shield-ellipsis',
+  'shopping-bag',
+  'sliders-horizontal',
+  'sparkles',
+  'square-pen',
+  'square-slash',
+  'square-terminal',
+  'star',
+  'table-2',
+  'text-quote',
+  'trash',
+  'trending-up',
+  'triangle-alert',
+  'trophy',
+  'type',
+  'user',
+  'user-check',
+  'users',
+  'utensils-crossed',
+  'variable',
+  'video',
+  'wand-sparkles',
+  'zap',
+  'zap-off',
+  'zoom-in',
+  'zoom-out',
+] as const;

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

@@ -91,7 +91,11 @@ export const NM_ICON_IDS = [
   'rows',
 ] as const;
 
-export type NmIconId = (typeof NM_ICON_IDS)[number];
+import type { NM_EXTENDED_ICON_IDS } from './nm-icons-extended.ts';
+
+export type NmCoreIconId = (typeof NM_ICON_IDS)[number];
+/** The core ids above plus the generated lucide ids in nm-icons-extended.ts. */
+export type NmIconId = NmCoreIconId | (typeof NM_EXTENDED_ICON_IDS)[number];
 
 export type NmIconSpec = {
   viewBox: string;
@@ -414,4 +418,4 @@ export const NM_ICONS = {
     viewBox: '0 0 20 21',
     fill: 'M19.7499 10.2456C19.7499 9.51343 19.684 8.81284 19.5615 8.13916H10.085V11.9988L15.5427 12C15.3213 13.2842 14.6089 14.3789 13.5174 15.1087V17.6128H16.7661C18.6631 15.869 19.7499 13.2912 19.7499 10.2456ZM13.5185 15.1088C12.6142 15.7146 11.4496 16.069 10.0873 16.069C7.45553 16.069 5.22298 14.3076 4.42345 11.9333H1.07227V14.5158C2.73255 17.7883 6.14497 20.0339 10.0873 20.0339C12.812 20.0339 15.1011 19.1439 16.7673 17.6117L13.5185 15.1088ZM4.10832 10.0175C4.10832 9.35087 4.22018 8.70643 4.42389 8.10058V5.51813H1.07271C0.386221 6.87134 0 8.39883 0 10.0175C0 11.6362 0.387398 13.1637 1.07271 14.5169L4.42389 11.9345C4.22018 11.3286 4.10832 10.6842 4.10832 10.0175ZM10.0873 3.96491C11.5745 3.96491 12.9062 4.47368 13.9577 5.46783L16.8367 2.61052C15.0881 0.992982 12.8085 0 10.0873 0C6.14614 0 2.73255 2.24561 1.07227 5.51812L4.42345 8.10058C5.22298 5.72631 7.45553 3.96491 10.0873 3.96491Z',
   },
-} as const satisfies Partial<Record<NmIconId, NmIconSpec>>;
+} as const satisfies Partial<Record<NmCoreIconId, NmIconSpec>>;

package/registry/ui/config/nm-voice-orb.ts

@@ -0,0 +1,50 @@
+import { defineOrbTheme, type OrbState } from 'orb-ui';
+
+export type NmVoiceOrbAgentState =
+  | null
+  | 'idle'
+  | 'connecting'
+  | 'listening'
+  | 'thinking'
+  | 'talking'
+  | 'speaking'
+  | 'error';
+
+export const NM_VOICE_ORB_SIZE = 34;
+
+export const NM_VOICE_ORB_CLASSES = {
+  root: 'nm-voice-orb',
+} as const;
+
+export const NM_ORB_UI_THEME = defineOrbTheme({
+  name: 'cloud',
+  preset: 'expressive',
+  geometry: {
+    diameterRatio: 1,
+    listeningMinScale: 0.88,
+    speakingMaxScale: 1,
+    idleDotScale: 0.88,
+  },
+  motion: {
+    entranceHoldMs: 0,
+    entranceGrowMs: 160,
+    entranceSettleMs: 240,
+  },
+});
+
+export function toOrbUiState(agentState: NmVoiceOrbAgentState | undefined): OrbState {
+  switch (agentState) {
+    case 'talking':
+    case 'speaking':
+      return 'speaking';
+    case 'thinking':
+      return 'thinking';
+    case 'connecting':
+      return 'connecting';
+    case 'error':
+      return 'error';
+    case 'listening':
+    default:
+      return 'listening';
+  }
+}

package/registry/ui/lib/nm-motion.ts

@@ -0,0 +1,30 @@
+/**
+ * The one place NIF reaches for Animate UI. Each part is Animate UI's version of a Base UI primitive: the same API,
+ * with Motion built in. NIF components import their primitives from here and never from Animate UI directly, so the
+ * motion layer can be swapped by changing this file alone.
+ *
+ * Animate UI is "MIT + Commons Clause". It may be used in a product, but its components may not be sold or
+ * redistributed in their original form. NIF therefore depends on the package and never copies or bundles its code.
+ */
+export { Checkbox } from '@animate-ui/react/primitives/base-ui/checkbox';
+export { Collapsible } from '@animate-ui/react/primitives/base-ui/collapsible';
+export { Combobox } from '@animate-ui/react/primitives/base-ui/combobox';
+export { ContextMenu } from '@animate-ui/react/primitives/base-ui/context-menu';
+export { Dialog } from '@animate-ui/react/primitives/base-ui/dialog';
+export { Menu } from '@animate-ui/react/primitives/base-ui/menu';
+export { Menubar } from '@animate-ui/react/primitives/base-ui/menubar';
+export { Popover } from '@animate-ui/react/primitives/base-ui/popover';
+export { PreviewCard } from '@animate-ui/react/primitives/base-ui/preview-card';
+export { Progress } from '@animate-ui/react/primitives/base-ui/progress';
+export { Radio } from '@animate-ui/react/primitives/base-ui/radio';
+export { RadioGroup } from '@animate-ui/react/primitives/base-ui/radio-group';
+export { Select } from '@animate-ui/react/primitives/base-ui/select';
+export { Slider } from '@animate-ui/react/primitives/base-ui/slider';
+export { Switch } from '@base-ui/react/switch';
+export { Tabs } from '@animate-ui/react/primitives/base-ui/tabs';
+export { Toggle } from '@animate-ui/react/primitives/base-ui/toggle';
+export { Tooltip } from '@animate-ui/react/primitives/base-ui/tooltip';
+export { Button } from '@animate-ui/react/primitives/buttons/button';
+
+/** The animated icon engine. Icons follow the hover of the control around them, or animate on their own. */
+export { AnimateIcon, IconWrapper, getVariants, useAnimateIconContext, type IconProps } from '@animate-ui/react/icons';

package/registry/ui/styles/tokens.css

@@ -258,6 +258,9 @@
   --nm-control-option-inset: calc(var(--nm-control-inset) - var(--nm-menu-pad));
   /* Widths of the floating parts and the narrow content columns. */
   --nm-width-menu: 15rem;
+  --nm-width-menu-max: 24rem;
+  /* The composer with one line of text: its padding, frame, line, gap and bar. A host reserves this much so the box grows upward. */
+  --nm-composer-rest: calc(var(--nm-space-12) * 2 + var(--nm-rule) * 2 + var(--nm-space-24) * 2 + var(--control-h));
   --nm-width-popup-sm: 16rem;
   --nm-width-popup: 18rem;
   --nm-width-tooltip: 20rem;
@@ -265,6 +268,10 @@
   --nm-code-gutter: 3ch;
   --nm-width-date: 11rem;
   --nm-width-dialog: 40rem;
+  /* A page column, such as a settings page: a share of the view, never narrower or wider than its bounds. */
+  --nm-width-column: 90%;
+  --nm-width-column-min: 20rem;
+  --nm-width-column-max: 50rem;
   --nm-height-command: 28rem;
   --nm-height-picker: 14rem;
   --nm-height-color: 9rem;