@nordmanai/nif 0.2.2 → 0.2.4

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

@@ -1,6 +1,420 @@
-import type { ComponentProps } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
 import { nmClass } from '../../lib/nm-class.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+import { NmProse } from '../nm-prose/nm-prose.tsx';
+import { NmSegmented } from '../nm-segmented/nm-segmented.tsx';
+import { createLogger } from '../../kit-logger.ts';
 
-export function NmTextarea({ className, ...props }: ComponentProps<'textarea'>) {
-  return <textarea data-slot="textarea" className={nmClass('nm-textarea', className)} {...props} />;
+const logger = createLogger('interface-nm-textarea');
+
+export type NmTextareaVariant = 'default' | 'panel';
+
+export type NmTextareaProps = ComponentProps<'textarea'> & {
+  variant?: NmTextareaVariant;
+  openInPanel?: boolean;
+  panelTitle?: string;
+  panelButtonLabel?: string;
+  panelDefaultTab?: 'code' | 'preview';
+  renderMarkdown?: (markdown: string) => ReactNode;
+};
+
+function renderInline(text: string): ReactNode[] {
+  const parts: ReactNode[] = [];
+  const regex = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\([^)]+\))/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+    const token = match[0];
+    if (token.startsWith('**') && token.endsWith('**')) {
+      parts.push(<strong key={match.index}>{token.slice(2, -2)}</strong>);
+    } else if (token.startsWith('*') && token.endsWith('*')) {
+      parts.push(<em key={match.index}>{token.slice(1, -1)}</em>);
+    } else if (token.startsWith('`') && token.endsWith('`')) {
+      parts.push(<code key={match.index}>{token.slice(1, -1)}</code>);
+    } else if (token.startsWith('[') && token.includes('](')) {
+      const closeBracket = token.indexOf('](');
+      const label = token.slice(1, closeBracket);
+      const url = token.slice(closeBracket + 2, -1);
+      parts.push(
+        <a key={match.index} href={url} target="_blank" rel="noreferrer">
+          {label}
+        </a>,
+      );
+    }
+    lastIndex = regex.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+  return parts.length > 0 ? parts : [text];
+}
+
+function parseMarkdown(md: string): ReactNode {
+  if (!md.trim()) {
+    return <p className="nm-textarea-panel__empty">Nothing to preview</p>;
+  }
+
+  const lines = md.split('\n');
+  const nodes: ReactNode[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    if (line.startsWith('```')) {
+      const codeLines: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith('```')) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      i++;
+      nodes.push(
+        <pre key={`code-${i}`}>
+          <code>{codeLines.join('\n')}</code>
+        </pre>,
+      );
+      continue;
+    }
+
+    if (line.startsWith('#### ')) {
+      nodes.push(<h4 key={`h4-${i}`}>{renderInline(line.slice(5))}</h4>);
+      i++;
+      continue;
+    }
+    if (line.startsWith('### ')) {
+      nodes.push(<h3 key={`h3-${i}`}>{renderInline(line.slice(4))}</h3>);
+      i++;
+      continue;
+    }
+    if (line.startsWith('## ')) {
+      nodes.push(<h2 key={`h2-${i}`}>{renderInline(line.slice(3))}</h2>);
+      i++;
+      continue;
+    }
+    if (line.startsWith('# ')) {
+      nodes.push(<h1 key={`h1-${i}`}>{renderInline(line.slice(2))}</h1>);
+      i++;
+      continue;
+    }
+
+    if (/^(\*\*\*|---|___)$/.test(line.trim())) {
+      nodes.push(<hr key={`hr-${i}`} />);
+      i++;
+      continue;
+    }
+
+    if (line.startsWith('> ')) {
+      const quoteLines: string[] = [line.slice(2)];
+      i++;
+      while (i < lines.length && lines[i].startsWith('> ')) {
+        quoteLines.push(lines[i].slice(2));
+        i++;
+      }
+      nodes.push(
+        <blockquote key={`quote-${i}`}>
+          {quoteLines.map((ql, idx) => (
+            <p key={idx}>{renderInline(ql)}</p>
+          ))}
+        </blockquote>,
+      );
+      continue;
+    }
+
+    if (/^[-*]\s+/.test(line)) {
+      const items: string[] = [line.replace(/^[-*]\s+/, '')];
+      i++;
+      while (i < lines.length && /^[-*]\s+/.test(lines[i])) {
+        items.push(lines[i].replace(/^[-*]\s+/, ''));
+        i++;
+      }
+      nodes.push(
+        <ul key={`ul-${i}`}>
+          {items.map((item, idx) => (
+            <li key={idx}>{renderInline(item)}</li>
+          ))}
+        </ul>,
+      );
+      continue;
+    }
+
+    if (/^\d+\.\s+/.test(line)) {
+      const items: string[] = [line.replace(/^\d+\.\s+/, '')];
+      i++;
+      while (i < lines.length && /^\d+\.\s+/.test(lines[i])) {
+        items.push(lines[i].replace(/^\d+\.\s+/, ''));
+        i++;
+      }
+      nodes.push(
+        <ol key={`ol-${i}`}>
+          {items.map((item, idx) => (
+            <li key={idx}>{renderInline(item)}</li>
+          ))}
+        </ol>,
+      );
+      continue;
+    }
+
+    if (!line.trim()) {
+      i++;
+      continue;
+    }
+
+    const paraLines: string[] = [line];
+    i++;
+    while (
+      i < lines.length &&
+      lines[i].trim() &&
+      !lines[i].startsWith('#') &&
+      !lines[i].startsWith('```') &&
+      !lines[i].startsWith('> ') &&
+      !/^[-*]\s+/.test(lines[i]) &&
+      !/^\d+\.\s+/.test(lines[i]) &&
+      !/^(\*\*\*|---|___)$/.test(lines[i].trim())
+    ) {
+      paraLines.push(lines[i]);
+      i++;
+    }
+    nodes.push(<p key={`p-${i}`}>{renderInline(paraLines.join(' '))}</p>);
+  }
+
+  return nodes;
+}
+
+const PANEL_TABS = [
+  { id: 'code', label: 'Code', icon: 'code' as const },
+  { id: 'preview', label: 'Preview', icon: 'presentation' as const },
+] as const;
+
+export const NmTextarea = forwardRef<HTMLTextAreaElement, NmTextareaProps>(
+  function NmTextarea(
+    {
+      className,
+      variant = 'default',
+      openInPanel = false,
+      panelTitle,
+      panelButtonLabel = 'Open in panel',
+      panelDefaultTab = 'code',
+      renderMarkdown,
+      value,
+      defaultValue,
+      onChange,
+      ...props
+    },
+    forwardedRef,
+  ) {
+    const isPanelEnabled = variant === 'panel' || openInPanel;
+    const [panelOpen, setPanelOpen] = useState(false);
+    const [tab, setTab] = useState<'code' | 'preview'>(panelDefaultTab);
+    const [copied, setCopied] = useState(false);
+    const triggerRef = useRef<HTMLButtonElement>(null);
+    const internalTextareaRef = useRef<HTMLTextAreaElement | null>(null);
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => String(defaultValue ?? ''));
+
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? String(value) : uncontrolledValue;
+
+    const handleTextareaChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+      if (!isControlled) {
+        setUncontrolledValue(event.target.value);
+      }
+      onChange?.(event);
+    };
+
+    const handlePanelTextChange = (nextText: string) => {
+      if (!isControlled) {
+        setUncontrolledValue(nextText);
+      }
+      if (internalTextareaRef.current) {
+        internalTextareaRef.current.value = nextText;
+      }
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: nextText, name: props.name },
+          currentTarget: { value: nextText, name: props.name },
+        } as ChangeEvent<HTMLTextAreaElement>;
+        onChange(syntheticEvent);
+      }
+    };
+
+    const handleCopy = () => {
+      if (typeof navigator !== 'undefined' && navigator.clipboard) {
+        void navigator.clipboard.writeText(currentValue);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }
+    };
+
+    const handleClose = useCallback(() => {
+      setPanelOpen(false);
+      triggerRef.current?.focus();
+    }, []);
+
+    useEffect(() => {
+      if (!panelOpen) return;
+      const onKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          handleClose();
+        }
+      };
+      window.addEventListener('keydown', onKeyDown);
+      return () => window.removeEventListener('keydown', onKeyDown);
+    }, [panelOpen, handleClose]);
+
+    const titleId = useId();
+    const lineCount = currentValue ? currentValue.split('\n').length : 0;
+    const charCount = currentValue.length;
+
+    const textareaElement = (
+      <textarea
+        className={nmClass('nm-textarea', className)}
+        ref={(node) => {
+          internalTextareaRef.current = node;
+          if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+          } else if (forwardedRef) {
+            forwardedRef.current = node;
+          }
+        }}
+        data-slot="textarea"
+        value={value}
+        defaultValue={defaultValue}
+        onChange={handleTextareaChange}
+        {...props}
+      />
+    );
+
+    if (!isPanelEnabled) {
+      return textareaElement;
+    }
+
+    const panelContent = panelOpen && typeof document !== 'undefined' ? (
+      createPortal(
+        <>
+          <div
+            className="nm-textarea-panel__backdrop"
+            onClick={handleClose}
+            aria-hidden="true"
+          />
+          <aside
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={panelTitle ? titleId : undefined}
+            aria-label={panelTitle ? undefined : 'Markdown Editor'}
+            className="nm-textarea-panel"
+          >
+            <header className="nm-textarea-panel__header">
+              <div className="nm-textarea-panel__title-group">
+                {panelTitle ? (
+                  <h3 id={titleId} className="nm-textarea-panel__title">
+                    {panelTitle}
+                  </h3>
+                ) : null}
+                <NmSegmented
+                  label="Editor view"
+                  tone="pills"
+                  items={PANEL_TABS}
+                  active={tab}
+                  onSelect={(next) => setTab(next as 'code' | 'preview')}
+                />
+              </div>
+              <div className="nm-textarea-panel__actions">
+                <button
+                  type="button"
+                  className="nm-textarea-panel__action-btn"
+                  aria-label={copied ? 'Copied' : 'Copy markdown'}
+                  title={copied ? 'Copied' : 'Copy markdown'}
+                  onClick={handleCopy}
+                >
+                  <NmIcon id={copied ? 'check' : 'copy'} />
+                </button>
+                <button
+                  type="button"
+                  className="nm-textarea-panel__action-btn"
+                  aria-label="Close panel"
+                  title="Close panel"
+                  onClick={handleClose}
+                >
+                  <NmIcon id="x" />
+                </button>
+              </div>
+            </header>
+
+            <div className="nm-textarea-panel__body">
+              {tab === 'code' ? (
+                <textarea
+                  className="nm-textarea-panel__editor"
+                  value={currentValue}
+                  placeholder={props.placeholder ?? 'Enter markdown content...'}
+                  aria-label="Markdown source"
+                  autoFocus
+                  onChange={(e) => handlePanelTextChange(e.target.value)}
+                />
+              ) : (
+                <div className="nm-textarea-panel__preview">
+                  <NmProse>
+                    {renderMarkdown ? renderMarkdown(currentValue) : parseMarkdown(currentValue)}
+                  </NmProse>
+                </div>
+              )}
+            </div>
+
+            <footer className="nm-textarea-panel__footer">
+              <span>
+                {lineCount} {lineCount === 1 ? 'line' : 'lines'} · {charCount} characters
+              </span>
+              <button
+                type="button"
+                className="nm-textarea-panel__done"
+                onClick={handleClose}
+              >
+                Done
+              </button>
+            </footer>
+          </aside>
+        </>,
+        document.body,
+      )
+    ) : null;
+
+    logger.debug('render', variant, { panelOpen });
+
+    return (
+      <div className="nm-textarea-wrap">
+        {textareaElement}
+        <button
+          ref={triggerRef}
+          type="button"
+          className="nm-textarea__panel-trigger"
+          aria-label={panelButtonLabel}
+          aria-expanded={panelOpen}
+          title={panelButtonLabel}
+          onClick={() => setPanelOpen(true)}
+        >
+          <NmIcon id="panel" />
+        </button>
+        {panelContent}
+      </div>
+    );
+  },
+);
+
+export function NmTextareaPanel(props: NmTextareaProps) {
+  return <NmTextarea variant="panel" {...props} />;
 }

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