tricu

arguments-ui.ts (3768B)

---

 import { literals, type Literal } from './codecs.js';
 import { parseLiteral, printLiteral } from './literal-input.js';
 
 export function argumentEditor(raw: HTMLTextAreaElement) {
   const container = document.getElementById('argument-fields')!;
   const add = document.getElementById('add-argument') as HTMLButtonElement;
   const rawMode = document.getElementById('raw-arguments') as HTMLInputElement;
   let snapshot = '', disabled = false;
   let labels: readonly string[] = [];
   let rows: { input: HTMLTextAreaElement; original?: Literal; text: string }[] = [];
   function render(): void {
     container.replaceChildren();
     if (!rows.length) { const hint = document.createElement('p'); hint.className = 'hint'; hint.textContent = 'No inputs supplied. Add an input to apply this definition.'; container.append(hint); }
     rows.forEach((row, i) => {
       const wrapper = document.createElement('div'); wrapper.className = 'argument-row';
       const label = document.createElement('label'); label.htmlFor = `argument-${i}`; label.textContent = labels[i] ?? `Argument ${i + 1}`;
       row.input.id = label.htmlFor; row.input.rows = 2; row.input.maxLength = 16000; row.input.spellcheck = false; row.input.disabled = disabled;
       const remove = document.createElement('button'); remove.type = 'button'; remove.textContent = 'Remove'; remove.disabled = disabled;
       remove.setAttribute('aria-label', `Remove argument ${i + 1}`);
       remove.onclick = () => { rows.splice(i, 1); render(); sync(); };
       row.input.oninput = sync;
       wrapper.append(label, row.input, remove); container.append(wrapper);
     });
     container.hidden = rawMode.checked; add.hidden = rawMode.checked; add.disabled = disabled || rows.length >= 16;
     raw.hidden = !rawMode.checked; rawMode.disabled = disabled;
   }
   function values(): Literal[] {
     return literals(rows.map(row => row.original && row.input.value === row.text ? row.original : parseLiteral(row.input.value)));
   }
   function sync(): void {
     try { raw.value = JSON.stringify(values()); snapshot = raw.value; } catch { /* Retain invalid field text for correction; read reports it. */ }
   }
   function refresh(reset = false): void {
     if (reset) rawMode.checked = false;
     if (!reset && raw.value === snapshot) { render(); return; }
     try {
       rows = literals(JSON.parse(raw.value) as unknown).map(original => {
         const input = document.createElement('textarea'), text = printLiteral(original); input.value = text; return { input, original, text };
       });
       snapshot = raw.value;
     } catch { rawMode.checked = true; }
     render();
   }
   add.onclick = () => { const input = document.createElement('textarea'); input.value = 't'; rows.push({ input, text: 't' }); render(); sync(); input.focus(); };
   raw.oninput = () => { snapshot = ''; };
   rawMode.onchange = () => {
     if (!rawMode.checked) refresh();
     else {
       try { raw.value = JSON.stringify(values()); snapshot = raw.value; }
       catch (error) {
         rawMode.checked = false;
         document.getElementById('result')!.textContent = `Correct the argument before switching editors: ${error instanceof Error ? error.message : String(error)}`;
       }
     }
     render();
   };
   refresh();
   return {
     refresh,
     labels(value: readonly string[]) { labels = value; },
     disable(value: boolean) { disabled = value; refresh(); },
     read(): Literal[] {
       if (raw.value.length > 16000) throw new Error('Argument text limit exceeded');
       if (rawMode.checked || raw.value !== snapshot) return literals(JSON.parse(raw.value) as unknown);
       const result = values();
       if (JSON.stringify(result).length > 16000) throw new Error('Argument text limit exceeded');
       sync(); return result;
     },
   };
 }