@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/flow/forms/ToolServerListField.tsx

@@ -0,0 +1,242 @@
+// ToolServerListField: zero or more external tool servers (Model Context
+// Protocol) for an agent, each reached by a remote address or a local
+// command. Headers are kept untouched (secrets live on credential screens).
+
+import { useEffect, useId, useRef, useState } from 'react'
+import { Plus, Trash2 } from 'lucide-react'
+import { Button, Fieldset, TextField } from '../../index'
+import { defineLabels, fill, useFlowLocale, useLabels } from '../internal/labels'
+
+export interface ToolServer {
+  prefix?: string
+  url?: string
+  command?: string
+  args?: string[]
+  headers?: Record<string, string>
+}
+
+export interface ToolServerListLabels {
+  label: string
+  add: string
+  empty: string
+  legend: string
+  prefix: string
+  prefixHint: string
+  url: string
+  urlPlaceholder: string
+  command: string
+  args: string
+  argsHint: string
+  remove: string
+  incomplete: string
+  badUrl: string
+  added: string
+}
+
+export const toolServerListLabels = defineLabels<ToolServerListLabels>('ToolServerListField', {
+  en: {
+    label: 'Tool servers',
+    add: 'Add server',
+    empty: 'No tool server attached.',
+    legend: 'Server {n, number}',
+    prefix: 'Tool name prefix',
+    prefixHint: 'Put in front of every tool this server offers.',
+    url: 'Remote address',
+    urlPlaceholder: 'https://',
+    command: 'Local command',
+    args: 'Command arguments',
+    argsHint: 'Separated by spaces.',
+    remove: 'Remove server {n, number}',
+    incomplete: 'Without an address or a command this server will be ignored on save.',
+    badUrl: 'Not a valid address.',
+    added: 'Server added',
+  },
+  'pt-BR': {
+    label: 'Servidores de ferramentas',
+    add: 'Adicionar servidor',
+    empty: 'Nenhum servidor de ferramentas associado.',
+    legend: 'Servidor {n, number}',
+    prefix: 'Prefixo dos nomes das ferramentas',
+    prefixHint: 'Vai antes de cada ferramenta oferecida por este servidor.',
+    url: 'Endereço remoto',
+    urlPlaceholder: 'https://',
+    command: 'Comando local',
+    args: 'Argumentos do comando',
+    argsHint: 'Separados por espaços.',
+    remove: 'Remover servidor {n, number}',
+    incomplete: 'Sem endereço nem comando, este servidor será ignorado ao salvar.',
+    badUrl: 'Endereço inválido.',
+    added: 'Servidor adicionado',
+  },
+  es: {
+    label: 'Servidores de herramientas',
+    add: 'Añadir servidor',
+    empty: 'No hay servidores de herramientas.',
+    legend: 'Servidor {n, number}',
+    prefix: 'Prefijo de los nombres de herramientas',
+    prefixHint: 'Se antepone a cada herramienta que ofrece este servidor.',
+    url: 'Dirección remota',
+    urlPlaceholder: 'https://',
+    command: 'Comando local',
+    args: 'Argumentos del comando',
+    argsHint: 'Separados por espacios.',
+    remove: 'Quitar servidor {n, number}',
+    incomplete: 'Sin dirección ni comando, este servidor se ignorará al guardar.',
+    badUrl: 'La dirección no es válida.',
+    added: 'Servidor añadido',
+  },
+})
+
+export const defaultToolServerListLabels: ToolServerListLabels = toolServerListLabels.bundles.en
+
+export interface ToolServerListFieldProps {
+  value: ToolServer[]
+  /** Every edit, add or removal (raw; clean with cleanToolServers on save). */
+  onChange: (list: ToolServer[]) => void
+  /** Hosts that forbid local processes hide command and arguments. */
+  allowCommand?: boolean
+  labels?: Partial<ToolServerListLabels>
+}
+
+const splitArgs = (text: string) => text.split(/\s+/).filter(Boolean)
+
+/** Trims fields, drops empty arguments and entries without address or command; undefined when nothing remains. */
+export function cleanToolServers(list: readonly ToolServer[] | undefined): ToolServer[] | undefined {
+  const out: ToolServer[] = []
+  for (const s of list ?? []) {
+    const prefix = s.prefix?.trim()
+    const url = s.url?.trim()
+    const command = s.command?.trim()
+    const args = (s.args ?? []).map((a) => a.trim()).filter(Boolean)
+    if (!url && !command) continue
+    out.push({
+      ...(prefix ? { prefix } : {}),
+      ...(url ? { url } : {}),
+      ...(command ? { command } : {}),
+      ...(args.length ? { args } : {}),
+      ...(s.headers ? { headers: s.headers } : {}),
+    })
+  }
+  return out.length ? out : undefined
+}
+
+function isUrl(text: string): boolean {
+  try {
+    const u = new URL(text.trim())
+    return u.protocol === 'http:' || u.protocol === 'https:'
+  } catch {
+    return false
+  }
+}
+
+export function ToolServerListField({ value, onChange, allowCommand = true, labels }: ToolServerListFieldProps) {
+  const l = useLabels(toolServerListLabels, labels)
+  const { locale } = useFlowLocale()
+  const headingId = useId()
+  // Argument text is kept as typed so spaces survive while editing.
+  const [argText, setArgText] = useState<string[]>(() => value.map((s) => (s.args ?? []).join(' ')))
+  const [urlChecked, setUrlChecked] = useState<Record<number, boolean>>({})
+  const [live, setLive] = useState('')
+  const firstFields = useRef<Array<HTMLInputElement | null>>([])
+  const addRef = useRef<HTMLButtonElement | HTMLAnchorElement | null>(null)
+  const pendingFocus = useRef<number | 'add' | null>(null)
+
+  useEffect(() => {
+    if (pendingFocus.current === null) return
+    const target = pendingFocus.current === 'add' ? addRef.current : firstFields.current[pendingFocus.current]
+    pendingFocus.current = null
+    target?.focus()
+  })
+
+  const patch = (i: number, p: Partial<ToolServer>) => onChange(value.map((s, k) => (k === i ? { ...s, ...p } : s)))
+
+  const add = () => {
+    setArgText((t) => [...t, ''])
+    pendingFocus.current = value.length
+    onChange([...value, {}])
+    setLive(l.added)
+  }
+
+  const remove = (i: number) => {
+    setArgText((t) => t.filter((_, k) => k !== i))
+    const next = value.filter((_, k) => k !== i)
+    pendingFocus.current = next.length ? Math.min(i, next.length - 1) : 'add'
+    onChange(next)
+  }
+
+  return (
+    <div className="ty-tool-servers" role="group" aria-labelledby={headingId}>
+      <div className="ty-tool-servers__header">
+        <span id={headingId} className="ty-tool-servers__label">
+          {l.label}
+        </span>
+        <Button ref={addRef} variant="secondary" size="compact" leadingIcon={<Plus />} onPress={add}>
+          {l.add}
+        </Button>
+      </div>
+      {value.length === 0 ? <p className="ty-tool-servers__empty">{l.empty}</p> : null}
+      {value.map((s, i) => {
+        const n = i + 1
+        const incomplete = !s.url?.trim() && !s.command?.trim()
+        const badUrl = urlChecked[i] && !!s.url?.trim() && !isUrl(s.url)
+        return (
+          <Fieldset key={i} legend={fill(l.legend, { n }, locale)} className="ty-tool-servers__entry">
+            <TextField
+              ref={(el) => {
+                firstFields.current[i] = el
+              }}
+              label={l.prefix}
+              hint={l.prefixHint}
+              value={s.prefix ?? ''}
+              onChange={(v) => patch(i, { prefix: v })}
+            />
+            <div className="ty-tool-servers__reach" data-command={allowCommand || undefined}>
+              <TextField
+                label={l.url}
+                inputType="url"
+                placeholder={l.urlPlaceholder}
+                className="ty-ltr-text"
+                value={s.url ?? ''}
+                onChange={(v) => patch(i, { url: v })}
+                onBlur={() => setUrlChecked((c) => ({ ...c, [i]: true }))}
+                {...(badUrl ? { errorMessage: l.badUrl } : {})}
+              />
+              {allowCommand ? (
+                <TextField label={l.command} className="ty-tool-servers__mono ty-ltr-text" value={s.command ?? ''} onChange={(v) => patch(i, { command: v })} />
+              ) : null}
+            </div>
+            {allowCommand ? (
+              <TextField
+                label={l.args}
+                hint={l.argsHint}
+                className="ty-tool-servers__mono ty-ltr-text"
+                value={argText[i] ?? (s.args ?? []).join(' ')}
+                onChange={(v) => {
+                  setArgText((t) => {
+                    const copy = [...t]
+                    copy[i] = v
+                    return copy
+                  })
+                  patch(i, { args: splitArgs(v) })
+                }}
+              />
+            ) : null}
+            {incomplete ? (
+              <p className="ty-tool-servers__hint" data-tone="warning">
+                {l.incomplete}
+              </p>
+            ) : null}
+            <div className="ty-tool-servers__actions">
+              <Button variant="quiet" size="compact" leadingIcon={<Trash2 />} onPress={() => remove(i)} accessibleLabel={fill(l.remove, { n }, locale)}>
+                {fill(l.remove, { n }, locale)}
+              </Button>
+            </div>
+          </Fieldset>
+        )
+      })}
+      <p className="ty-visually-hidden" role="status" aria-live="polite">
+        {live}
+      </p>
+    </div>
+  )
+}

package/src/flow/forms/VariableListEditor.css

@@ -0,0 +1,82 @@
+/* VariableListEditor: tone marks the leading marker only (decorative). */
+@layer tympan.components {
+  .ty-var-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-2);
+  }
+  .ty-var-list__label {
+    color: var(--ty-ink);
+    font-size: var(--ty-font-size-label);
+    line-height: var(--ty-font-line-height-label);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  .ty-var-list__rows {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .ty-var-list__row {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+    min-block-size: 44px;
+    padding-inline: var(--ty-space-2);
+    border: 1px solid transparent;
+    border-radius: var(--ty-radius-control);
+  }
+  .ty-var-list__row:focus-within {
+    border-color: var(--ty-line-strong);
+    background: var(--ty-surface-sunken);
+  }
+  .ty-var-list__marker {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 8px;
+    block-size: 8px;
+    border-radius: var(--ty-radius-pill);
+    background: var(--ty-flow-tone, var(--ty-ink-3));
+  }
+  .ty-var-list__marker[data-numbered] {
+    inline-size: auto;
+    min-inline-size: 20px;
+    block-size: 20px;
+    padding-inline: 4px;
+    background: var(--ty-flow-tone-soft, var(--ty-surface-sunken));
+    color: var(--ty-flow-tone-text, var(--ty-ink-2));
+    font-size: var(--ty-font-size-meta);
+    font-variant-numeric: tabular-nums;
+  }
+  .ty-var-list__name,
+  .ty-var-list__name-field {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .ty-var-list__add {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ty-space-2);
+  }
+  .ty-var-list__add > :first-child {
+    flex: 1 1 auto;
+  }
+  .ty-var-list__empty {
+    margin: 0;
+    color: var(--ty-ink-3);
+  }
+  @media (forced-colors: active) {
+    .ty-var-list__marker {
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+    .ty-var-list__row:focus-within {
+      border-color: Highlight;
+    }
+  }
+}

package/src/flow/forms/VariableListEditor.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { VariableListEditor, type VariableListEditorProps } from './VariableListEditor'
+
+function Controlled(props: Partial<VariableListEditorProps> & { initial?: string[]; spy?: (n: string[]) => void }) {
+  const [value, setValue] = useState(props.initial ?? [])
+  return (
+    <VariableListEditor
+      label="Input variables"
+      {...props}
+      value={value}
+      onChange={(n) => {
+        props.spy?.(n)
+        setValue(n)
+      }}
+    />
+  )
+}
+
+describe('VariableListEditor', () => {
+  it('adds a typed name on Enter, clears the field and keeps focus there', async () => {
+    const spy = vi.fn()
+    const { container } = render(<Controlled spy={spy} />)
+    const field = screen.getByRole('textbox', { name: 'New name' })
+    await userEvent.type(field, 'region{Enter}')
+    expect(spy).toHaveBeenCalledWith(['region'])
+    expect(field).toHaveValue('')
+    expect(field).toHaveFocus()
+    expect(screen.getByRole('status')).toHaveTextContent('region added')
+    await expectNoAxeViolations(container)
+  })
+
+  it('refuses a duplicate with an error', async () => {
+    const spy = vi.fn()
+    render(<Controlled initial={['a']} spy={spy} />)
+    await userEvent.type(screen.getByRole('textbox', { name: 'New name' }), 'a{Enter}')
+    expect(spy).not.toHaveBeenCalled()
+    expect(screen.getByText('Already in the list')).toBeInTheDocument()
+  })
+
+  it('hides the add row when full', () => {
+    render(<VariableListEditor value={['a', 'b']} onChange={() => {}} max={2} />)
+    expect(screen.queryByRole('textbox', { name: 'New name' })).toBeNull()
+  })
+
+  it('edits a name inline when editable', async () => {
+    const spy = vi.fn()
+    render(<Controlled initial={['a']} editable spy={spy} />)
+    const row = screen.getByRole('textbox', { name: 'Name 1' })
+    await userEvent.clear(row)
+    await userEvent.type(row, 'b')
+    expect(spy).toHaveBeenLastCalledWith(['b'])
+  })
+
+  it('removes a name and moves focus to the next remove button', async () => {
+    const spy = vi.fn()
+    render(<Controlled initial={['a', 'b']} spy={spy} />)
+    await userEvent.click(screen.getByRole('button', { name: 'Remove a' }))
+    expect(spy).toHaveBeenCalledWith(['b'])
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Remove b' })).toHaveFocus())
+  })
+
+  it('numbers rows in order when numbered', () => {
+    render(<VariableListEditor value={['x', 'y', 'z']} onChange={() => {}} numbered />)
+    expect(screen.getAllByRole('listitem').map((li) => li.textContent?.slice(0, 1))).toEqual(['1', '2', '3'])
+  })
+
+  it('disables add while the field is empty and gives 44 px rows', () => {
+    render(<VariableListEditor value={[]} onChange={() => {}} />)
+    expect(screen.getByRole('button', { name: 'Add' })).toBeDisabled()
+    const css = cssOf('flow/forms/VariableListEditor.css')
+    expect(css).toMatch(/min-block-size:\s*44px/)
+    expect(mediaBlock(css, /\(forced-colors: active\)/)).toMatch(/CanvasText/)
+  })
+})

package/src/flow/forms/VariableListEditor.tsx

@@ -0,0 +1,280 @@
+// VariableListEditor: an ordered list of unique names (flow inputs, outputs,
+// aggregated values) edited in place. The rules and the typing state live in
+// nameListModel.ts; this file only lays out three parts: the caption, the
+// list of slots and the entry for a new name, plus one polite region.
+
+import { Fragment, useId, useReducer, useRef, type KeyboardEvent, type ReactNode, type Ref } from 'react'
+import { Plus, X } from 'lucide-react'
+import { Button, TextField } from '../../index'
+import { defineLabels, fill, useFlowLocale, useLabels } from '../internal/labels'
+import { admit, EMPTY_ENTRY, focusTargetAfter, issueAt, nameListStep, replaceAt, withoutAt } from './nameListModel'
+
+export type VariableListTone = 'input' | 'output' | 'aggregate' | 'terminal' | 'neutral'
+
+export interface VariableListEditorLabels {
+  placeholder: string
+  add: string
+  addField: string
+  remove: string
+  rowField: string
+  duplicate: string
+  blank: string
+  empty: string
+  added: string
+  removed: string
+}
+
+export const variableListEditorLabels = defineLabels<VariableListEditorLabels>('VariableListEditor', {
+  en: {
+    placeholder: 'New name',
+    add: 'Add',
+    addField: 'New name',
+    remove: 'Remove {name}',
+    rowField: 'Name {n, number}',
+    duplicate: 'Already in the list',
+    blank: 'Name is empty; it will be dropped on save',
+    empty: 'No names yet.',
+    added: '{name} added',
+    removed: '{name} removed',
+  },
+  'pt-BR': {
+    placeholder: 'Novo nome',
+    add: 'Adicionar',
+    addField: 'Novo nome',
+    remove: 'Remover {name}',
+    rowField: 'Nome {n, number}',
+    duplicate: 'Já está na lista',
+    blank: 'Nome vazio; será descartado ao salvar',
+    empty: 'Nenhum nome ainda.',
+    added: '{name} adicionado',
+    removed: '{name} removido',
+  },
+  es: {
+    placeholder: 'Nombre nuevo',
+    add: 'Añadir',
+    addField: 'Nombre nuevo',
+    remove: 'Quitar {name}',
+    rowField: 'Nombre {n, number}',
+    duplicate: 'Ya está en la lista',
+    blank: 'Nombre vacío; se descartará al guardar',
+    empty: 'Todavía no hay nombres.',
+    added: '{name} añadido',
+    removed: '{name} quitado',
+  },
+})
+
+export const defaultVariableListEditorLabels: VariableListEditorLabels = variableListEditorLabels.bundles.en
+
+export interface VariableListEditorProps {
+  value: string[]
+  onChange: (names: string[]) => void
+  label?: string
+  placeholder?: string
+  addLabel?: string
+  tone?: VariableListTone
+  numbered?: boolean
+  editable?: boolean
+  /** Maximum length; 0 means unlimited. */
+  max?: number
+  /** No add row (the list is only shown and pruned). */
+  readOnly?: boolean
+  labels?: Partial<VariableListEditorLabels>
+}
+
+/** Marker colour per role (decorative; the name carries the meaning). */
+const ROLE_SWATCH: Readonly<Record<VariableListTone, string>> = {
+  neutral: 'neutral',
+  input: 'categorical-3',
+  aggregate: 'categorical-8',
+  output: 'categorical-1',
+  terminal: 'categorical-6',
+}
+
+type RemoveHandle = HTMLButtonElement | HTMLAnchorElement | null
+
+interface SlotContext {
+  list: readonly string[]
+  numbered: boolean
+  editable: boolean
+  canRemove: boolean
+  locale: string
+  text: VariableListEditorLabels
+  keepHandle: (position: number, el: RemoveHandle) => void
+  rename: (position: number, name: string) => void
+  remove: (position: number) => void
+}
+
+function slotMarker(ctx: SlotContext, position: number): ReactNode {
+  return (
+    <span className="ty-var-list__marker" aria-hidden={ctx.numbered ? undefined : true} data-numbered={ctx.numbered || undefined}>
+      {ctx.numbered ? new Intl.NumberFormat(ctx.locale).format(position + 1) : ''}
+    </span>
+  )
+}
+
+function slotName(ctx: SlotContext, position: number, name: string): ReactNode {
+  if (!ctx.editable) {
+    return (
+      <span className="ty-var-list__name ty-mono ty-ltr-text" dir="ltr">
+        {name}
+      </span>
+    )
+  }
+  const issue = issueAt(ctx.list, position)
+  const message = issue === 'blank' ? ctx.text.blank : issue === 'duplicate' ? ctx.text.duplicate : null
+  return (
+    <TextField
+      className="ty-var-list__name-field"
+      accessibleLabel={fill(ctx.text.rowField, { n: position + 1 }, ctx.locale)}
+      value={name}
+      onChange={(v) => ctx.rename(position, v)}
+      {...(message ? { errorMessage: message } : {})}
+    />
+  )
+}
+
+function slotRemove(ctx: SlotContext, position: number, name: string): ReactNode {
+  if (!ctx.canRemove) return null
+  return (
+    <Button
+      ref={(el) => ctx.keepHandle(position, el)}
+      variant="quiet"
+      size="compact"
+      shape="circle"
+      iconOnly
+      accessibleLabel={fill(ctx.text.remove, { name }, ctx.locale)}
+      leadingIcon={<X />}
+      onPress={() => ctx.remove(position)}
+    />
+  )
+}
+
+/** The parts of one row, in order; each is a function of the row. */
+const SLOT_PARTS = [
+  (ctx: SlotContext, position: number) => slotMarker(ctx, position),
+  (ctx: SlotContext, position: number, name: string) => slotName(ctx, position, name),
+  (ctx: SlotContext, position: number, name: string) => slotRemove(ctx, position, name),
+] as const
+
+interface EntryProps {
+  draft: string
+  complaint: string | null
+  fieldLabel: string
+  placeholder: string
+  buttonText: string
+  fieldRef: Ref<HTMLInputElement>
+  onType: (text: string) => void
+  onCommit: () => void
+}
+
+function NewNameEntry(p: EntryProps) {
+  const commitOnEnter = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter' && (e.target as HTMLElement).tagName === 'INPUT') {
+      e.preventDefault()
+      p.onCommit()
+    }
+  }
+  return (
+    <div className="ty-var-list__add" onKeyDown={commitOnEnter}>
+      <TextField ref={p.fieldRef} accessibleLabel={p.fieldLabel} placeholder={p.placeholder} value={p.draft} onChange={p.onType} {...(p.complaint ? { errorMessage: p.complaint } : {})} />
+      <Button variant="secondary" leadingIcon={<Plus />} disabled={p.draft.trim() === ''} onPress={p.onCommit}>
+        {p.buttonText}
+      </Button>
+    </div>
+  )
+}
+
+export function VariableListEditor(props: VariableListEditorProps) {
+  const text = useLabels(variableListEditorLabels, props.labels)
+  const { locale } = useFlowLocale()
+  const captionId = useId()
+  const [entry, dispatch] = useReducer(nameListStep, EMPTY_ENTRY)
+  const entryField = useRef<HTMLInputElement>(null)
+  const handles = useRef(new Map<number, RemoveHandle>())
+
+  const list = props.value
+  const limit = props.max ?? 0
+  const accepting = !props.readOnly && (limit <= 0 || list.length < limit)
+
+  const commit = () => {
+    const verdict = admit(list, entry.draft)
+    if (verdict.kind === 'empty') return
+    if (verdict.kind === 'taken') {
+      dispatch({ type: 'refused' })
+      return
+    }
+    props.onChange(verdict.next)
+    dispatch({ type: 'accepted', name: verdict.name })
+    entryField.current?.focus()
+  }
+
+  const ctx: SlotContext = {
+    list,
+    numbered: props.numbered ?? false,
+    editable: props.editable ?? false,
+    canRemove: !props.readOnly,
+    locale,
+    text,
+    keepHandle: (position, el) => {
+      if (el) handles.current.set(position, el)
+      else handles.current.delete(position)
+    },
+    rename: (position, name) => props.onChange(replaceAt(list, position, name)),
+    remove: (position) => {
+      const rest = withoutAt(list, position)
+      props.onChange(rest)
+      dispatch({ type: 'dropped', name: list[position]! })
+      const target = focusTargetAfter(position, rest.length)
+      requestAnimationFrame(() => {
+        const handle = target >= 0 ? handles.current.get(target) : null
+        ;(handle?.isConnected ? handle : entryField.current)?.focus()
+      })
+    },
+  }
+
+  const spoken = entry.spoken ? fill(entry.spoken.kind === 'added' ? text.added : text.removed, { name: entry.spoken.name }, locale) : ''
+  const caption = props.label ? (
+    <span id={captionId} className="ty-var-list__label">
+      {props.label}
+    </span>
+  ) : null
+
+  let listing: ReactNode = null
+  if (list.length) {
+    listing = (
+      <ul className="ty-var-list__rows" role="list" aria-labelledby={props.label ? captionId : undefined}>
+        {list.map((name, position) => (
+          <li key={position} className="ty-var-list__row">
+            {SLOT_PARTS.map((part, i) => (
+              <Fragment key={i}>{part(ctx, position, name)}</Fragment>
+            ))}
+          </li>
+        ))}
+      </ul>
+    )
+  } else if (!accepting) {
+    listing = <p className="ty-var-list__empty">{text.empty}</p>
+  }
+
+  return (
+    <div className="ty-var-list" data-tone={ROLE_SWATCH[props.tone ?? 'input']}>
+      {caption}
+      {listing}
+      {accepting ? (
+        <NewNameEntry
+          draft={entry.draft}
+          complaint={entry.complaint ? text.duplicate : null}
+          fieldLabel={text.addField}
+          placeholder={props.placeholder ?? text.placeholder}
+          buttonText={props.addLabel ?? text.add}
+          fieldRef={entryField}
+          onType={(t) => dispatch({ type: 'typed', text: t })}
+          onCommit={commit}
+        />
+      ) : null}
+      <p className="ty-visually-hidden" role="status" aria-live="polite">
+        {spoken}
+      </p>
+    </div>
+  )
+}