@nordmanai/nif 0.2.2 → 0.2.3

package/registry/ui/components/nm-icon/nm-lucide.tsx

@@ -1,4 +1,16 @@
 import {
+  Archive,
+  Camera,
+  CloudUpload,
+  Download,
+  Lock,
+  LogOut,
+  Minimize,
+  Pencil,
+  Pin,
+  Share,
+  Trash2,
+  Volume2,
   AppWindowMac,
   ArrowLeft,
   ArrowRight,
@@ -72,15 +84,29 @@ import {
   X,
   type LucideIcon,
 } from 'lucide-react';
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode, SVGAttributes } from 'react';
+import { NM_ANIMATED_ICONS } from './animated/index.ts';
+import { NM_LUCIDE_EXTENDED } from './nm-lucide-extended.tsx';
 import type { NmIconId } from '../../config/nm-icons.ts';
 
 export const NM_LUCIDE_FILLED_IDS = new Set<string>(['stop']);
 
-const LUCIDE: Partial<
+const LUCIDE_CORE: Partial<
   Record<NmIconId | 'square-dashed-bottom-code' | 'layout-grid' | 'stop' | 'scan' | 'pause', LucideIcon>
 > = {
   plus: Plus,
+  volume: Volume2,
+  camera: Camera,
+  minimize: Minimize,
+  download: Download,
+  publish: CloudUpload,
+  share: Share,
+  pen: Pencil,
+  pin: Pin,
+  archive: Archive,
+  trash: Trash2,
+  logout: LogOut,
+  lock: Lock,
   expand: Maximize2,
   scan: Scan,
   reload: RotateCcw,
@@ -156,25 +182,49 @@ const LUCIDE: Partial<
   rows: Rows2,
 };
 
+const LUCIDE: Partial<Record<string, LucideIcon>> = { ...NM_LUCIDE_EXTENDED, ...LUCIDE_CORE };
+
+/** True when the icon plays an animation on hover: a lucide icon Animate UI has an animation for. */
+export function isNmIconAnimated(id: string): boolean {
+  const Icon = LUCIDE[id];
+  return Icon != null && !NM_LUCIDE_FILLED_IDS.has(id) && (Icon as { displayName?: string }).displayName! in NM_ANIMATED_ICONS;
+}
+
 export function hasNmLucide(id: string): boolean {
   return id in LUCIDE;
 }
 
-export function NmLucide({ id, className }: { id: string; className?: string }): ReactNode {
-  const Icon = LUCIDE[id as NmIconId | 'square-dashed-bottom-code' | 'layout-grid' | 'stop'];
+function sized(size: number | string | undefined, style: CSSProperties | undefined): CSSProperties | undefined {
+  if (size == null) {
+    return style;
+  }
+  const length = typeof size === 'number' ? `${size}px` : size;
+  return { width: length, height: length, ...style };
+}
+
+export function NmLucide({ id, className, size, style, ...rest }: { id: string; className?: string; size?: number | string; style?: CSSProperties } & Omit<SVGAttributes<SVGElement>, 'id' | 'className' | 'style'>): ReactNode {
+  const Icon = LUCIDE[id];
   if (Icon == null) {
     return null;
   }
   const filled = NM_LUCIDE_FILLED_IDS.has(id);
   const baseClass = filled ? 'nm-icon nm-icon--filled' : 'nm-icon';
   const iconClass = className == null ? baseClass : `${baseClass} ${className}`;
+  // An icon Animate UI has an animation for plays it when the control around it is hovered. The rest stay lucide.
+  const Animated = filled ? undefined : NM_ANIMATED_ICONS[(Icon as { displayName?: string }).displayName ?? ''];
+  if (Animated) {
+    return <Animated className={iconClass} data-icon={id} aria-hidden={rest['aria-label'] == null} focusable="false" size={typeof size === 'number' ? size : undefined} {...rest} style={sized(size, style)} />;
+  }
   return (
     <Icon
       className={iconClass}
       data-icon={id}
       strokeWidth={filled ? undefined : 2}
-      aria-hidden
+      aria-hidden={rest['aria-label'] == null}
       focusable="false"
+      size={typeof size === 'number' ? size : undefined}
+      {...(rest as object)}
+      style={sized(size, style)}
     />
   );
 }

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

@@ -1,3 +1,4 @@
+
   .nm-input {
     box-sizing: border-box;
     width: 100%;

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

@@ -1,5 +1,5 @@
-import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
-import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { Menubar as MenubarPrimitive } from '../../lib/nm-motion.ts';
+import { Menu as MenuPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 /**

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

@@ -21,6 +21,13 @@
     background: var(--nm-canvas);
   }
 
+  .nm-panel-region[data-measure='column'] {
+    width: var(--nm-width-column);
+    min-width: min(100%, var(--nm-width-column-min));
+    max-width: var(--nm-width-column-max);
+    margin-inline: auto;
+  }
+
   .nm-panel-region__header {
     display: flex;
     flex-shrink: 0;

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

@@ -4,9 +4,26 @@ import { nmClass } from '../../lib/nm-class.ts';
 export const NM_PANEL_VARIANTS = ['default', 'inset', 'plain'] as const;
 export type NmPanelVariant = (typeof NM_PANEL_VARIANTS)[number];
 
+/** `full` fills the room it is given. `column` is a centred share of it, held between a minimum and a maximum width. */
+export const NM_PANEL_MEASURES = ['full', 'column'] as const;
+export type NmPanelMeasure = (typeof NM_PANEL_MEASURES)[number];
+
 /** A region of the app, such as an inspector or a side panel: a header, content that scrolls, and a footer. */
-export function NmPanel({ className, variant = 'default', ...props }: ComponentProps<'section'> & { variant?: NmPanelVariant }) {
-  return <section data-slot="panel" data-variant={variant} className={nmClass('nm-panel-region', className)} {...props} />;
+export function NmPanel({
+  className,
+  variant = 'default',
+  measure = 'full',
+  ...props
+}: ComponentProps<'section'> & { variant?: NmPanelVariant; measure?: NmPanelMeasure }) {
+  return (
+    <section
+      data-slot="panel"
+      data-variant={variant}
+      data-measure={measure}
+      className={nmClass('nm-panel-region', className)}
+      {...props}
+    />
+  );
 }
 
 export function NmPanelHeader({ className, ...props }: ComponentProps<'header'>) {

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

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
-import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+import { Popover as PopoverPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 export function NmPopover(props: PopoverPrimitive.Root.Props) {
@@ -16,11 +16,12 @@ export function NmPopoverContent({
   alignOffset = 0,
   side = 'bottom',
   sideOffset = 8,
+  anchor,
   ...props
-}: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+}: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'>) {
   return (
     <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Positioner align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset} className="nm-popover__positioner">
+      <PopoverPrimitive.Positioner anchor={anchor} align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset} className="nm-popover__positioner">
         <PopoverPrimitive.Popup data-slot="popover-content" className={nmClass('nm-popover', className as string)} {...props} />
       </PopoverPrimitive.Positioner>
     </PopoverPrimitive.Portal>

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

@@ -1,4 +1,4 @@
-import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+import { Progress as ProgressPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 /** Base UI Progress, in the shadcn composition, styled by NIF tokens. */

package/registry/ui/components/nm-radio-group/nm-radio-group.tsx

@@ -1,5 +1,5 @@
-import { Radio as RadioPrimitive } from '@base-ui/react/radio';
-import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import { Radio as RadioPrimitive } from '../../lib/nm-motion.ts';
+import { RadioGroup as RadioGroupPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 export function NmRadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Select as SelectPrimitive } from '@base-ui/react/select';
+import { Select as SelectPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 

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

@@ -0,0 +1,17 @@
+  .nm-skeleton {
+    border-radius: var(--nm-radius-md);
+    background: var(--nm-panel);
+    animation: nm-skeleton-pulse 1.6s ease-in-out infinite;
+  }
+
+  @keyframes nm-skeleton-pulse {
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nm-skeleton {
+      animation: none;
+    }
+  }

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

@@ -0,0 +1,7 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** A pulsing placeholder in the shape of the content that is loading. Size it with a class. */
+export function NmSkeleton({ className, ...props }: ComponentProps<'div'>): ReactNode {
+  return <div data-slot="skeleton" className={nmClass('nm-skeleton', className)} {...props} />;
+}

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

@@ -1,4 +1,4 @@
-import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+import { Slider as SliderPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 /** `label` and `output` add a caption above the track, set like the caption of a Field. */

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

@@ -1,4 +1,4 @@
-import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { forwardRef, type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import {
   NM_SMALL_ICON_BUTTON_TONES,
@@ -22,7 +22,7 @@ export type NmSmallIconButtonProps = {
   active?: boolean;
   iconContent?: ReactNode;
   testId?: string;
-  onClick?: () => void;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-label' | 'children'>;
 
 export const NmSmallIconButton = forwardRef<HTMLButtonElement, NmSmallIconButtonProps>(
@@ -56,7 +56,7 @@ export const NmSmallIconButton = forwardRef<HTMLButtonElement, NmSmallIconButton
           if (disabled === true) {
             return;
           }
-          onClick?.();
+          onClick?.(event);
         }}
       >
         {iconContent}

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

@@ -0,0 +1,22 @@
+  .nm-spinner {
+    display: inline-block;
+    box-sizing: border-box;
+    width: var(--nm-icon);
+    height: var(--nm-icon);
+    border: 2px solid var(--nm-line-strong);
+    border-top-color: var(--nm-fg);
+    border-radius: 50%;
+    animation: nm-spinner-turn 0.8s linear infinite;
+  }
+
+  @keyframes nm-spinner-turn {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nm-spinner {
+      animation-duration: 2.4s;
+    }
+  }

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

@@ -0,0 +1,7 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** A ring that turns while something loads. It is the themed icon size; a class or style sets another. */
+export function NmSpinner({ className, ...props }: ComponentProps<'span'>): ReactNode {
+  return <span role="status" aria-live="polite" data-slot="spinner" className={nmClass('nm-spinner', className)} {...props} />;
+}

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

@@ -7,11 +7,16 @@
     width: calc(var(--nm-switch-thumb) * 2);
     height: var(--nm-switch-thumb);
     padding: var(--nm-space-2);
-    border: 0;
+    border: var(--nm-rule) solid var(--nm-line-strong);
     border-radius: var(--toggle-r);
     background: var(--nm-panel);
     cursor: pointer;
-    transition: background 0.15s;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: none;
+    transition:
+      background 0.15s,
+      border-color 0.15s;
   }
 
   .nm-switch:focus-visible {
@@ -20,6 +25,7 @@
   }
 
   .nm-switch[data-checked] {
+    border-color: var(--nm-fg);
     background: var(--nm-fg);
   }
 
@@ -30,12 +36,16 @@
 
   .nm-switch__thumb {
     display: block;
+    flex-shrink: 0;
+    pointer-events: none;
     width: var(--nm-switch-thumb);
     height: var(--nm-switch-thumb);
     border-radius: 50%;
     background: var(--nm-fg);
+    transform: translateX(0);
+    will-change: transform;
     transition:
-      transform 0.15s,
+      transform 0.15s var(--ease, ease),
       background 0.15s;
   }
 
@@ -43,3 +53,10 @@
     transform: translateX(var(--nm-switch-thumb));
     background: var(--nm-canvas);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nm-switch,
+    .nm-switch__thumb {
+      transition: none;
+    }
+  }

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

@@ -1,4 +1,4 @@
-import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+import { Switch as SwitchPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 export function NmSwitch({ className, ...props }: SwitchPrimitive.Root.Props) {

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

@@ -26,3 +26,7 @@
   border-bottom-color: var(--nm-fg);
   color: var(--nm-fg);
 }
+
+.nm-tabs__panel {
+  outline: none;
+}

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

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+import { Tabs as TabsPrimitive } from '../../lib/nm-motion.ts';
+import { nmClass } from '../../lib/nm-class.ts';
 import { NM_TABS_CLASSES, type NmTabItem } from '../../config/nm-tabs.ts';
 import { createLogger } from '../../kit-logger.ts';
 
@@ -30,3 +32,20 @@ export function NmTabs(props: NmTabsProps): ReactNode {
     </div>
   );
 }
+
+/** The parts of a tab set, for a view that lays out its own list and panels. */
+export function NmTabsRoot(props: TabsPrimitive.Root.Props): ReactNode {
+  return <TabsPrimitive.Root data-slot="tabs" {...props} />;
+}
+
+export function NmTabsList({ className, ...props }: TabsPrimitive.List.Props): ReactNode {
+  return <TabsPrimitive.List data-slot="tabs-list" className={nmClass(NM_TABS_CLASSES.root, className as string)} {...props} />;
+}
+
+export function NmTabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): ReactNode {
+  return <TabsPrimitive.Tab data-slot="tabs-trigger" className={nmClass(NM_TABS_CLASSES.item, className as string)} {...props} />;
+}
+
+export function NmTabsContent({ className, ...props }: TabsPrimitive.Panel.Props): ReactNode {
+  return <TabsPrimitive.Panel data-slot="tabs-content" className={nmClass('nm-tabs__panel', className as string)} {...props} />;
+}

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

@@ -1,3 +1,4 @@
+
   .nm-textarea {
     box-sizing: border-box;
     display: block;

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

@@ -1,4 +1,4 @@
-import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { Toggle as TogglePrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 export const NM_TOGGLE_VARIANTS = ['default', 'outline'] as const;

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

@@ -4,6 +4,7 @@ import { nmClass } from '../../lib/nm-class.ts';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { NM_BUTTON_TONES, nmButtonClassName, type NmButtonTone } from '../../config/nm-button.ts';
 import { nmIconButtonClassName, type NmIconButtonTone } from '../../config/nm-icon-button.ts';
+import { AnimateIcon } from '../../lib/nm-motion.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 
 /** Base UI Toolbar, in the shadcn composition, styled by NIF tokens. One tab stop, arrow keys move between controls. */
@@ -40,7 +41,7 @@ export function NmToolbarButton({
 }: Omit<ToolbarPrimitive.Button.Props, 'children'> & { icon?: NmIconId; label: string; tone?: NmIconButtonTone | NmButtonTone; pressed?: boolean; children?: ReactNode }) {
   const withText = children != null;
   const buttonTone = (Object.values(NM_BUTTON_TONES) as string[]).includes(tone ?? '') ? (tone as NmButtonTone) : 'muted';
-  return (
+  const button = (
     <ToolbarPrimitive.Button
       data-slot="toolbar-button"
       aria-label={label}
@@ -52,6 +53,8 @@ export function NmToolbarButton({
       {withText ? <span className="nm-button__label">{children}</span> : null}
     </ToolbarPrimitive.Button>
   );
+  // Always wrapped, so the control keeps its place in the tree when its icon is added or removed.
+  return <AnimateIcon animateOnHover={Boolean(icon)} asChild>{button}</AnimateIcon>;
 }
 
 /** A field in the bar that takes the free width, such as an address. */

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

@@ -1,4 +1,4 @@
-import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+import { Tooltip as TooltipPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 export function NmTooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {

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

@@ -0,0 +1,17 @@
+  .nm-voice-orb {
+    --orb-ui-size: var(--nm-icon-control);
+    flex-shrink: 0;
+    border-radius: var(--nm-control-radius);
+    overflow: hidden;
+  }
+
+  .nm-voice-orb .orb-ui__content {
+    overflow: hidden;
+    border-radius: inherit;
+  }
+
+  .nm-voice-orb:focus-visible {
+    outline: var(--nm-rule) solid var(--nm-fg);
+    outline-offset: var(--nm-space-2);
+  }
+

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.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',