@nordmanai/nif 0.0.0-stage → 0.2.0

package/registry/ui/components/nordman-login-sign-in/nordman-login-sign-in.tsx

@@ -0,0 +1,69 @@
+import { type FormEvent, type ReactNode } from 'react';
+import { NORDMAN_LOGIN_FIELDS, NORDMAN_LOGIN_FORM_ID } from '../../config/nordman-login.ts';
+import { NordmanLoginField } from '../nordman-login-field/nordman-login-field.tsx';
+import { nordmanLoginCopy } from '../../content/nordman-login.ts';
+import { createLogger } from '../../kit-logger.ts';
+import { NmButton } from '../nm-button/nm-button.tsx';
+
+const logger = createLogger('interface-nordman-login-sign-in');
+
+export type NordmanLoginSignInProps = {
+  pending: boolean;
+  passwordMin: number;
+  onForgot: () => void;
+  onSignIn: (input: { username: string; password: string }) => void;
+};
+
+export function NordmanLoginSignIn(props: NordmanLoginSignInProps): ReactNode {
+  function onSubmit(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    const username = String(data.get(NORDMAN_LOGIN_FIELDS.username) ?? '');
+    const password = String(data.get(NORDMAN_LOGIN_FIELDS.password) ?? '');
+    logger.debug('submit', 'start');
+    props.onSignIn({ username, password });
+  }
+
+  return (
+    <form className="nm-login__form" id={NORDMAN_LOGIN_FORM_ID} onSubmit={onSubmit}>
+      <NordmanLoginField
+        id={NORDMAN_LOGIN_FIELDS.username}
+        name={NORDMAN_LOGIN_FIELDS.username}
+        label={nordmanLoginCopy.identifier}
+        type="text"
+        autoComplete="username"
+        placeholder={nordmanLoginCopy.identifierPlaceholder}
+      />
+      <NordmanLoginField
+        id={NORDMAN_LOGIN_FIELDS.password}
+        name={NORDMAN_LOGIN_FIELDS.password}
+        label={nordmanLoginCopy.password}
+        type="password"
+        autoComplete="current-password"
+        placeholder={nordmanLoginCopy.passwordPlaceholder}
+        minLength={props.passwordMin}
+        accessory={
+          <button
+            className="nm-login__forgot"
+            type="button"
+            data-testid="cta-forgot-password"
+            onClick={props.onForgot}
+          >
+            {nordmanLoginCopy.forgot}
+          </button>
+        }
+      />
+      <div className="nm-login__submit">
+        <NmButton
+          label={props.pending ? nordmanLoginCopy.pending : nordmanLoginCopy.submit}
+          tone="filled"
+          size="large"
+          block
+          type="submit"
+          disabled={props.pending}
+          testId="cta-login"
+        />
+      </div>
+    </form>
+  );
+}

package/registry/ui/components/nordman-toggle/nordman-toggle.css

@@ -0,0 +1,28 @@
+  .nm-toggle {
+    display: inline-flex;
+    align-items: stretch;
+    gap: var(--nm-space-2);
+    width: fit-content;
+    max-width: 100%;
+    overflow-x: auto;
+    padding: var(--toggle-pad);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--toggle-r);
+  }
+
+  .nm-toggle__item {
+    display: inline-flex;
+    align-items: center;
+    height: var(--toggle-h);
+    padding: 0 var(--toggle-px);
+    border-radius: var(--toggle-r);
+    color: var(--nm-fg-subtle);
+    flex: 0 0 auto;
+    text-decoration: none;
+    font-size: var(--control-fs);
+  }
+
+  .nm-toggle__item[data-active='true'] {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }

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

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nordman-toggle');
+
+export type NordmanToggleItem = {
+  id: string;
+  label: string;
+  href: string;
+};
+
+export type NordmanToggleProps = {
+  items: readonly NordmanToggleItem[];
+  active: string;
+  testId?: string;
+};
+
+export function NordmanToggle(props: NordmanToggleProps): ReactNode {
+  logger.debug('render', props.active, { items: props.items.length });
+  return (
+    <nav className="nm-toggle" data-testid={props.testId}>
+      {props.items.map((item) => (
+        <a
+          key={item.id}
+          className="nm-toggle__item"
+          href={item.href}
+          data-active={item.id === props.active ? 'true' : 'false'}
+          aria-current={item.id === props.active ? 'page' : undefined}
+        >
+          {item.label}
+        </a>
+      ))}
+    </nav>
+  );
+}

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

@@ -0,0 +1,59 @@
+/** AI Elements for Nordman. Each is a composition of the kit's trace, message, dropdown and chatbox parts. */
+import type { NmTraceStatus } from './nm-message.ts';
+
+export const NM_AI_STATUS = ['pending', 'running', 'done', 'error'] as const;
+export type NmAiStatus = (typeof NM_AI_STATUS)[number];
+
+/** Trace lines show `running`, `error` and `pending`. A finished line carries no status. */
+export function nmAiTraceStatus(status: NmAiStatus): NmTraceStatus | undefined {
+  return status === 'done' ? undefined : status;
+}
+
+export const NM_TOOL_STATES = [
+  'input-streaming',
+  'input-available',
+  'approval-requested',
+  'approval-responded',
+  'output-available',
+  'output-error',
+  'output-denied',
+] as const;
+export type NmToolState = (typeof NM_TOOL_STATES)[number];
+
+export const NM_AI_BADGE_TONES = ['neutral', 'ok', 'error', 'warn'] as const;
+export type NmAiBadgeTone = (typeof NM_AI_BADGE_TONES)[number];
+
+export const NM_AI_CLASSES = {
+  bubble: 'nm-ai-bubble',
+  bubbleUser: 'nm-ai-bubble--user',
+  turn: 'nm-ai-turn',
+  turnUser: 'nm-ai-turn--user',
+  turnBody: 'nm-ai-turn__body',
+  turnFooter: 'nm-ai-turn__footer',
+  item: 'nm-ai-item',
+  itemMedia: 'nm-ai-item__media',
+  itemBody: 'nm-ai-item__body',
+  itemTitle: 'nm-ai-item__title',
+  itemDescription: 'nm-ai-item__description',
+  itemActions: 'nm-ai-item__actions',
+  sheet: 'nm-ai-sheet',
+  sheetHead: 'nm-ai-sheet__head',
+  sheetBody: 'nm-ai-sheet__body',
+  stack: 'nm-ai-stack',
+  checkpoint: 'nm-ai-checkpoint',
+  contextRows: 'nm-ai-context__rows',
+  tree: 'nm-ai-tree',
+  treeNode: 'nm-ai-tree__node',
+  citation: 'nm-ai-citation',
+  suggestions: 'nm-ai-suggestions',
+  suggestion: 'nm-ai-suggestion',
+  thread: 'nm-ai-thread',
+  threadEmpty: 'nm-ai-thread__empty',
+  threadJump: 'nm-ai-thread__jump',
+  selector: 'nm-ai-selector',
+  tests: 'nm-ai-tests',
+  testRow: 'nm-ai-tests__row',
+  frame: 'nm-ai-frame',
+  steps: 'nm-ai-steps',
+  stepsItem: 'nm-ai-steps__item',
+} as const;

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

@@ -0,0 +1,275 @@
+import { NM_SITE_PALETTE } from './nm-site-palette.ts';
+
+/** Single source of truth for Nordman visual appearance settings (Chat + kit). */
+
+export const NM_APPEARANCE_STORAGE_KEY = 'nordman-appearance-v1' as const;
+
+/** Dispatched on `window` after `applyAppearanceState` updates document tokens. */
+export const NM_APPEARANCE_APPLIED_EVENT = 'nordman-appearance-applied' as const;
+
+export const NM_APPEARANCE_MODES = ['system', 'light', 'dark'] as const;
+export type NmAppearanceMode = (typeof NM_APPEARANCE_MODES)[number];
+
+export const NM_UI_FONT_SIZE_PX = {
+  min: 12,
+  max: 16,
+  default: 14,
+} as const;
+
+/** Poppins ships nine weights. The setting is the Regular weight. Medium, semibold and bold step up from it. */
+export const NM_FONT_WEIGHTS = [
+  { id: '100', label: 'Thin' },
+  { id: '200', label: 'ExtraLight' },
+  { id: '300', label: 'Light' },
+  { id: '400', label: 'Regular' },
+  { id: '500', label: 'Medium' },
+  { id: '600', label: 'SemiBold' },
+  { id: '700', label: 'Bold' },
+  { id: '800', label: 'ExtraBold' },
+  { id: '900', label: 'Black' },
+] as const;
+
+export const NM_UI_FONT_WEIGHT = {
+  min: 100,
+  max: 900,
+  default: 400,
+} as const;
+
+export const NM_UI_ICON_SIZE_PX = {
+  min: 14,
+  max: 24,
+  default: 18,
+} as const;
+
+/** 100 = kit default corner roundness; scales all `--nm-*-radius` tokens. */
+export const NM_UI_RADIUS_PERCENT = {
+  min: 50,
+  max: 150,
+  default: 100,
+} as const;
+
+/** 100 = kit default spacing; scales every `--nm-space-*`, `--nm-gap-*` and `--nm-pad-*` token. */
+export const NM_UI_SPACE_PERCENT = {
+  min: 75,
+  max: 125,
+  default: 100,
+} as const;
+
+export const NM_APPEARANCE_CONTRAST = {
+  min: 0,
+  max: 100,
+  default: 0,
+} as const;
+
+export const NM_ACCENT_PRESETS = [
+  'default',
+  'blue',
+  'green',
+  'yellow',
+  'pink',
+  'orange',
+  'purple',
+  'white',
+  'custom',
+] as const;
+export type NmAccentPreset = (typeof NM_ACCENT_PRESETS)[number];
+
+export type NmAppearancePalette = {
+  canvas: string;
+  foreground: string;
+  accent: string;
+};
+
+export type NmThemePresetDefinition = {
+  id: string;
+  label: string;
+  swatch: string;
+  dark: Pick<NmAppearancePalette, 'canvas' | 'foreground'>;
+  light: Pick<NmAppearancePalette, 'canvas' | 'foreground'>;
+};
+
+export const NM_THEME_PRESETS: readonly NmThemePresetDefinition[] = [
+  {
+    id: 'nordman',
+    label: 'Nordman',
+    swatch: '#D2BB9C',
+    dark: { canvas: NM_SITE_PALETTE.dark.canvas, foreground: NM_SITE_PALETTE.dark.fg },
+    light: { canvas: NM_SITE_PALETTE.light.canvas, foreground: NM_SITE_PALETTE.light.fg },
+  },
+  {
+    id: 'ayu',
+    label: 'Ayu',
+    swatch: '#E6B450',
+    dark: { canvas: '#10141C', foreground: '#BFBDB6' },
+    light: { canvas: '#FAFAFA', foreground: '#5C6773' },
+  },
+  {
+    id: 'dracula',
+    label: 'Dracula',
+    swatch: '#FF79C6',
+    dark: { canvas: '#282A36', foreground: '#F8F8F2' },
+    light: { canvas: '#F8F8F2', foreground: '#282A36' },
+  },
+  {
+    id: 'catppuccin',
+    label: 'Catppuccin',
+    swatch: '#CBA6F7',
+    dark: { canvas: '#1E1E2E', foreground: '#CDD6F4' },
+    light: { canvas: '#EFF1F5', foreground: '#4C4F69' },
+  },
+  {
+    id: 'everforest',
+    label: 'Everforest',
+    swatch: '#A7C080',
+    dark: { canvas: '#2D353B', foreground: '#D3C6AA' },
+    light: { canvas: '#EFEDD9', foreground: '#5C6A72' },
+  },
+  {
+    id: 'github',
+    label: 'GitHub',
+    swatch: '#58A6FF',
+    dark: { canvas: '#0D1117', foreground: '#C9D1D9' },
+    light: { canvas: '#FFFFFF', foreground: '#24292F' },
+  },
+  {
+    id: 'gruvbox',
+    label: 'Gruvbox',
+    swatch: '#B8BB26',
+    dark: { canvas: '#282828', foreground: '#EBDBB2' },
+    light: { canvas: '#FBF1C7', foreground: '#3C3836' },
+  },
+  {
+    id: 'linear',
+    label: 'Linear',
+    swatch: '#5E6AD2',
+    dark: { canvas: '#08090A', foreground: '#EEEFF1' },
+    light: { canvas: '#FFFFFF', foreground: '#222326' },
+  },
+  { id: 'tokyo-night', label: 'Tokyo Night', swatch: '#7AA2F7', dark: { canvas: '#1A1B26', foreground: '#C0CAF5' }, light: { canvas: '#E1E2E7', foreground: '#3760BF' } },
+  { id: 'nord', label: 'Nord', swatch: '#88C0D0', dark: { canvas: '#2E3440', foreground: '#D8DEE9' }, light: { canvas: '#ECEFF4', foreground: '#2E3440' } },
+  { id: 'rose-pine', label: 'Rosé Pine', swatch: '#EBBCBA', dark: { canvas: '#191724', foreground: '#E0DEF4' }, light: { canvas: '#FAF4ED', foreground: '#575279' } },
+  { id: 'solarized', label: 'Solarized', swatch: '#268BD2', dark: { canvas: '#002B36', foreground: '#839496' }, light: { canvas: '#FDF6E3', foreground: '#657B83' } },
+  { id: 'monokai', label: 'Monokai', swatch: '#A6E22E', dark: { canvas: '#272822', foreground: '#F8F8F2' }, light: { canvas: '#FAFAF5', foreground: '#272822' } },
+  { id: 'one', label: 'One', swatch: '#61AFEF', dark: { canvas: '#282C34', foreground: '#ABB2BF' }, light: { canvas: '#FAFAFA', foreground: '#383A42' } },
+  { id: 'synthwave', label: 'Synthwave', swatch: '#FF7EDB', dark: { canvas: '#262335', foreground: '#FFFFFF' }, light: { canvas: '#FFF5FC', foreground: '#2A2139' } },
+  { id: 'night-owl', label: 'Night Owl', swatch: '#82AAFF', dark: { canvas: '#011627', foreground: '#D6DEEB' }, light: { canvas: '#FBFBFB', foreground: '#403F53' } },
+  { id: 'kanagawa', label: 'Kanagawa', swatch: '#7E9CD8', dark: { canvas: '#1F1F28', foreground: '#DCD7BA' }, light: { canvas: '#F2ECBC', foreground: '#545464' } },
+  { id: 'palenight', label: 'Palenight', swatch: '#C792EA', dark: { canvas: '#292D3E', foreground: '#A6ACCD' }, light: { canvas: '#FAFAFA', foreground: '#546E7A' } },
+  { id: 'lsd', label: 'LSD', swatch: '#FF2BD6', dark: { canvas: '#0D0221', foreground: '#F5E9FF' }, light: { canvas: '#FFF4FD', foreground: '#2B0A4A' } },
+  /** The colours are yours: the three pickers are open while this theme is chosen. */
+  { id: 'custom', label: 'Custom', swatch: '#D2BB9C', dark: { canvas: NM_SITE_PALETTE.dark.canvas, foreground: NM_SITE_PALETTE.dark.fg }, light: { canvas: NM_SITE_PALETTE.light.canvas, foreground: NM_SITE_PALETTE.light.fg } },
+] as const;
+
+export const NM_ACCENT_HEX: Record<Exclude<NmAccentPreset, 'default' | 'custom'>, string> = {
+  blue: '#58A6FF',
+  green: '#3DDC84',
+  yellow: '#E6B450',
+  pink: '#FF79C6',
+  orange: '#FF9F43',
+  purple: '#A371F7',
+  white: '#FFFFFF',
+};
+
+export const NM_APPEARANCE_DEFAULTS = {
+  mode: 'system' as NmAppearanceMode,
+  themePresetId: 'nordman',
+  accentPreset: 'default' as NmAccentPreset,
+  customAccentHex: '#D2BB9C',
+  backgroundHex: NM_SITE_PALETTE.dark.canvas,
+  foregroundHex: NM_SITE_PALETTE.dark.fg,
+  uiFontSizePx: NM_UI_FONT_SIZE_PX.default,
+  uiFontWeight: NM_UI_FONT_WEIGHT.default as number,
+  uiIconSizePx: NM_UI_ICON_SIZE_PX.default,
+  uiRadiusPercent: NM_UI_RADIUS_PERCENT.default,
+  uiSpacePercent: NM_UI_SPACE_PERCENT.default,
+  contrast: NM_APPEARANCE_CONTRAST.default,
+} as const;
+
+export const NM_APPEARANCE_CSS_VARS = [
+  '--nm-canvas',
+  '--nm-fg',
+  '--nm-fg-muted',
+  '--nm-fg-subtle',
+  '--nm-stroke',
+  '--nm-line',
+  '--nm-line-strong',
+  '--nm-divider',
+  '--control-fs',
+  '--nm-panel',
+  '--nm-raised',
+  '--nm-inset',
+  '--nm-mark-primary',
+  '--nm-mark-secondary',
+  '--nm-mark-tertiary',
+  '--nm-mark-surface',
+  '--nm-canvas-rgb',
+  '--nm-fg-rgb',
+  '--nm-fg-muted-rgb',
+  '--nm-fg-subtle-rgb',
+  '--nm-stroke-rgb',
+  '--nm-line-rgb',
+  '--nm-panel-rgb',
+  '--nm-raised-rgb',
+  '--nm-inset-rgb',
+  '--sand',
+  '--nm-accent',
+  '--nm-accent-rgb',
+  '--orb-ui-cloud-appearance-deepColor',
+  '--orb-ui-cloud-appearance-upperColor',
+  '--orb-ui-cloud-appearance-lowerColor',
+  '--orb-ui-cloud-appearance-highlightColor',
+  '--orb-ui-cloud-appearance-launchColor',
+  '--orb-ui-cloud-appearance-spinnerColor',
+  '--nm-weight-light',
+  '--nm-weight-regular',
+  '--nm-weight-medium',
+  '--nm-weight-semibold',
+  '--nm-weight-bold',
+  '--nm-type-body',
+  '--nm-type-ui',
+  '--nm-type-ui-sm',
+  '--nm-type-lede',
+  '--nm-type-section',
+  '--nm-type-card',
+  '--nm-type-caption',
+  '--markdown-font-size',
+  '--font-size-base',
+  '--font-size-sm',
+  '--nm-icon-button',
+  '--nm-icon-sm',
+  '--nm-rail-icon',
+  '--nm-ui-chip-min-height',
+  '--nm-radius-scale',
+  '--nm-space-scale',
+  '--text-primary',
+  '--text-secondary',
+  '--text-tertiary',
+  '--text-muted',
+  '--presentation',
+  '--surface-primary',
+  '--surface-chat',
+  '--surface-secondary',
+  '--surface-secondary-alt',
+  '--surface-tertiary',
+  '--surface-primary-alt',
+  '--surface-dialog',
+  '--surface-hover',
+  '--surface-active',
+  '--border-light',
+  '--border-medium',
+  '--link',
+  '--link-hover',
+  '--link-visited',
+  '--accent-primary',
+  '--ring-primary',
+  '--brand-purple',
+  '--nordman-accent',
+] as const;
+
+export function findThemePreset(id: string): NmThemePresetDefinition | undefined {
+  return NM_THEME_PRESETS.find((preset) => preset.id === id);
+}
+
+export function defaultThemePresetId(): string {
+  return NM_APPEARANCE_DEFAULTS.themePresetId;
+}

package/registry/ui/config/nm-bar-overflow.ts

@@ -0,0 +1,10 @@
+export const NM_BAR_OVERFLOW_CLASSES = {
+  root: 'nm-bar-overflow',
+  row: 'nm-bar-overflow__row',
+  start: 'nm-bar-overflow__start',
+} as const;
+
+export const NM_BAR_OVERFLOW_TEST_IDS = {
+  root: 'bar-overflow',
+  menu: 'bar-overflow-menu',
+} as const;

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

@@ -0,0 +1,38 @@
+export const NM_BUTTON_TONES = {
+  filled: 'filled',
+  outline: 'outline',
+  muted: 'muted',
+  panel: 'panel',
+  danger: 'danger',
+} as const;
+
+export type NmButtonTone = (typeof NM_BUTTON_TONES)[keyof typeof NM_BUTTON_TONES];
+
+export const NM_BUTTON_SIZES = {
+  default: 'default',
+  compact: 'compact',
+  chip: 'chip',
+  large: 'large',
+} as const;
+
+export type NmButtonSize = (typeof NM_BUTTON_SIZES)[keyof typeof NM_BUTTON_SIZES];
+
+export const NM_BUTTON_CLASSES = {
+  root: 'nm-button',
+  filled: 'nm-button--filled',
+  outline: 'nm-button--outline',
+  muted: 'nm-button--muted',
+  panel: 'nm-button--panel',
+  danger: 'nm-button--danger',
+  default: 'nm-button--default',
+  compact: 'nm-button--compact',
+  chip: 'nm-button--chip',
+  large: 'nm-button--large',
+  block: 'nm-button--block',
+  icon: 'nm-button--icon',
+} as const;
+
+/** The button's class names, for triggers that must stay a Base UI part, such as a menu or popover trigger. */
+export function nmButtonClassName(tone: NmButtonTone, size: NmButtonSize = NM_BUTTON_SIZES.default, iconOnly = false): string {
+  return `${NM_BUTTON_CLASSES.root} ${NM_BUTTON_CLASSES[tone]} ${NM_BUTTON_CLASSES[size]}${iconOnly ? ` ${NM_BUTTON_CLASSES.icon}` : ''}`;
+}

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

@@ -0,0 +1,67 @@
+export const NM_CHATBOX_ICON_IDS = [
+  'paperclip',
+  'settings',
+  'globe',
+  'spreadsheet',
+  'pointer',
+  'mic',
+  'mic-off',
+  'audio-lines',
+  'send',
+  'stop',
+  'loader',
+  'x',
+  'check',
+  'integration',
+  'app',
+  'steer',
+  'queue',
+  'interrupt-steer',
+  'interrupt-send',
+] as const;
+
+export type NmChatboxIconId = (typeof NM_CHATBOX_ICON_IDS)[number];
+
+/** Public path for the composer MCP chip glyph — CSS `--nm-chatbox-integration-icon` must match. */
+export const NM_CHATBOX_INTEGRATION_ICON_PATH = '/interface/chatbox/integration.svg';
+
+export const NM_CHATBOX_ICON_SRC = {
+  paperclip: '/interface/chatbox/paperclip.svg',
+  settings: '/interface/chatbox/settings.svg',
+  globe: '/interface/chatbox/globe.svg',
+  spreadsheet: '/interface/chatbox/spreadsheet.svg',
+  pointer: '/interface/chatbox/pointer.svg',
+  mic: '/interface/chatbox/mic.svg',
+  'mic-off': '/interface/chatbox/mic.svg',
+  'audio-lines': '/interface/chatbox/audio-lines.svg',
+  send: '/interface/chatbox/send.svg',
+  stop: '/interface/chatbox/stop.svg',
+  loader: '/interface/chatbox/loader.svg',
+  x: '/interface/chatbox/x.svg',
+  check: '/interface/chatbox/check.svg',
+  integration: NM_CHATBOX_INTEGRATION_ICON_PATH,
+  app: '/interface/chatbox/app.svg',
+  steer: '/interface/chatbox/settings.svg',
+  queue: '/interface/chatbox/settings.svg',
+  'interrupt-steer': '/interface/chatbox/settings.svg',
+  'interrupt-send': '/interface/chatbox/send.svg',
+} as const satisfies Record<NmChatboxIconId, string>;
+
+/** Composer footer / dictation controls — values are `NmChatboxIcon` ids. */
+export const NM_CHATBOX_COMPOSER_ACTION_ICONS = {
+  send: 'send',
+  stop: 'stop',
+  audioLines: 'audio-lines',
+  loader: 'loader',
+  check: 'check',
+  cancel: 'x',
+  interruptSteer: 'interrupt-steer',
+} as const;
+
+/** During-run send menu row icons — values are `NmChatboxIcon` ids. */
+export const NM_CHATBOX_DURING_RUN_MENU_ICONS = {
+  steer: 'steer',
+  queue: 'queue',
+  interruptSteer: 'interrupt-steer',
+  interruptSend: 'interrupt-send',
+} as const;

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

@@ -0,0 +1,42 @@
+export const NM_CHATBOX_CLASSES = {
+  root: 'nm-chatbox',
+  files: 'nm-chatbox__files',
+  fileList: 'nm-chatbox__file-list',
+  fileItem: 'nm-chatbox__file-item',
+  imageAttachment: 'nm-chatbox__image-attachment',
+  imagePreview: 'nm-chatbox__image-preview',
+  prompt: 'nm-chatbox__prompt',
+  chips: 'nm-chatbox__chips',
+  promptField: 'nm-chatbox__prompt-field',
+  placeholder: 'nm-chatbox__placeholder',
+  field: 'nm-chatbox__field',
+  inline: 'nm-chatbox__inline',
+  inlineLink: 'nm-chatbox__inline-link',
+  row: 'nm-chatbox__row',
+  tools: 'nm-chatbox__tools',
+  actions: 'nm-chatbox__actions',
+  dictation: 'nm-chatbox__dictation',
+  app: 'nm-chatbox__app',
+  menu: 'nm-chatbox-menu',
+  menuText: 'nm-chatbox-menu--text',
+  menuItem: 'nm-chatbox-menu__item',
+  menuCopy: 'nm-chatbox-menu__copy',
+  menuHint: 'nm-chatbox-menu__hint',
+  menuSection: 'nm-chatbox-menu__section',
+  menuIcon: 'nm-chatbox-menu__icon',
+  menuLogo: 'nm-chatbox-menu__logo',
+  menuAnchor: 'nm-chatbox-menu__anchor',
+  connectTitle: 'nm-chatbox__connect-title',
+  connectIcon: 'nm-chatbox__connect-icon',
+  chip: 'nm-chatbox__chip',
+  chipIcon: 'nm-chatbox__chip-icon',
+  chipConnected: 'nm-chatbox__chip--connected',
+} as const;
+
+/** Add menu rows include an icon. Slash rows are a name and a short description. */
+export const NM_CHATBOX_MENU_MODE = {
+  icons: 'icons',
+  text: 'text',
+} as const;
+
+export type NmChatboxMenuMode = (typeof NM_CHATBOX_MENU_MODE)[keyof typeof NM_CHATBOX_MENU_MODE];