@adcops/autocore-react 3.5.7 → 3.5.11

package/src/components/tis-editor/editor/RawDataEditor.tsx

@@ -4,6 +4,7 @@ import { Checkbox } from 'primereact/checkbox';
 import { FormSection } from '../../forms/FormSection';
 import { FormRow } from '../../forms/FormRow';
 import type { RawColumn, RawDataShape, TestMethod } from '../types';
+import { VariableInput, rawSourceCatalog } from '../../varpick';
 
 export interface RawDataEditorProps {
     method: TestMethod;
@@ -89,10 +90,14 @@ export const RawDataEditor: React.FC<RawDataEditorProps> = ({ method, onChange }
                                 defaultValue={name}
                                 onBlur={(e) => renameColumn(name, e.target.value.trim())}
                             />
-                            <InputText
+                            <VariableInput
                                 placeholder="source (time / ni.<daq>.channels.<name> / derived)"
                                 value={col.source}
-                                onChange={(e) => updateColumn(name, { ...col, source: e.target.value })}
+                                onChange={(v) => updateColumn(name, { ...col, source: v })}
+                                catalog={() => rawSourceCatalog()}
+                                ariaLabel={`Choose the source for column ${name}`}
+                                pickerTitle="Column source"
+                                pickerHint="A DAQ channel is named ni.<daq>.channels.<name> and is not listed here — the editor has no channel catalog, so type it."
                             />
                             <InputText
                                 placeholder="formula (only when source=derived)"

package/src/components/tis-editor/editor/TestFieldDialog.tsx

@@ -7,11 +7,15 @@ import { Dropdown } from 'primereact/dropdown';
 import { Checkbox } from 'primereact/checkbox';
 import { InputNumber } from 'primereact/inputnumber';
 import { FormRow } from '../../forms/FormRow';
+import { useEditDraft } from '../../forms/useEditDraft';
 import type { TestField, AggFn, AggFrom, AggScope, AggregateSpec } from '../types';
 // One home for bound parsing/formatting — shared with the operator-facing
 // form so the editor and the runtime can never disagree on what a bound is.
 import { boundText, parseBound, boundInvalid } from '../../tis/TestFieldRow';
 import { AutoCoreTagContext } from '../../../core/AutoCoreTagContext';
+import { VariableInput } from '../../varpick';
+import { boundCatalog, configSourceCatalog, cycleSourceCatalog } from '../../varpick';
+import { useAuthoringCatalogs } from './AuthoringContext';
 
 
 const FIELD_TYPES: { label: string; value: string }[] = [
@@ -73,20 +77,50 @@ export interface TestFieldDialogProps {
     /** Candidate target field names for an aggregate's `of`, by source. */
     cycleFieldNames?: string[];
     resultsFieldNames?: string[];
+    /**
+     * True when this field belongs to `cycle_fields`. Only there does Source
+     * have two possible producers — a GM tag read at record time, or the
+     * sequence storing a value under this column's NAME — so only there is the
+     * picker a producer picker rather than a variable list.
+     */
+    isCycleField?: boolean;
 }
 
 const blank: TestField = { name: '', type: 'f32' };
 
 export const TestFieldDialog: React.FC<TestFieldDialogProps> = ({
     visible, initial, onCancel, onSave, siblingNames,
-    isResultsField = false, isCycleConfigField = false,
+    isResultsField = false, isCycleConfigField = false, isCycleField = false,
     cycleFieldNames = [], resultsFieldNames = [],
 }) => {
-    const [draft, setDraft] = useState<TestField>(blank);
-    // `default` is edited as free text so a numeric literal, a string, or an
-    // `${fqdn}` token can all be entered in one field; it's coerced on save.
-    const [defaultText, setDefaultText] = useState<string>('');
+    // Supplied by the editor above; see AuthoringContext for why this is not
+    // four levels of props.
+    const { variables, producedNames } = useAuthoringCatalogs();
+    // The field under edit plus its free-text Default, as one draft seeded
+    // once per open. `default` is edited as free text so a numeric literal, a
+    // string, or an `${fqdn}` token can all be entered in one field; it's
+    // coerced on save.
+    //
+    // Keyed on the field NAME, not on the `initial` object: this editor
+    // re-renders with the live tag traffic underneath it, and an
+    // identity-keyed reseed discards the operator's typing (see
+    // useEditDraft).
+    const { draft: form, setDraft: setForm, token } = useEditDraft(
+        visible,
+        initial?.name ?? '',
+        () => ({
+            field: initial ? { ...initial } : { ...blank },
+            defaultText: initial?.default == null ? '' : String(initial.default),
+        }),
+    );
+    const draft       = form.field;
+    const defaultText = form.defaultText;
+    const setDraft       = (field: TestField) => setForm(f => ({ ...f, field }));
+    const setDefaultText = (defaultText: string) => setForm(f => ({ ...f, defaultText }));
+
     const [error, setError] = useState<string | null>(null);
+    // Clears on open and on a switch to another field, and on no other render.
+    useEffect(() => { setError(null); }, [token]);
 
     // The quantity names this machine actually declares, from the resolved
     // units table. Offered as a dropdown so an author picks a row that exists
@@ -99,13 +133,23 @@ export const TestFieldDialog: React.FC<TestFieldDialogProps> = ({
         [scales],
     );
 
-    useEffect(() => {
-        if (visible) {
-            setDraft(initial ? { ...initial } : { ...blank });
-            setDefaultText(initial?.default == null ? '' : String(initial.default));
-            setError(null);
-        }
-    }, [visible, initial]);
+    // What the pickers offer. Units come from the machine's resolved scales, so
+    // an entry is labelled in the operator's active system rather than in
+    // whatever the variable's backend unit happens to be.
+    const catalogCtx = useMemo(
+        () => ({
+            variables,
+            unitFor: (q: string) => scales?.[q]?.label,
+        }),
+        [variables, scales],
+    );
+
+    // A cycle field's Source is the one that needs BOTH producers offered; every
+    // other array only ever binds a GM tag the setup form writes.
+    const sourceCatalog = () =>
+        isCycleField
+            ? cycleSourceCatalog(catalogCtx, { producedNames, fieldName: draft.name })
+            : configSourceCatalog(catalogCtx);
 
     // Turn the free-text Default into its stored form: an `${fqdn}` token and
     // other non-numerics stay strings; numeric/bool literals are stored typed.
@@ -262,10 +306,21 @@ export const TestFieldDialog: React.FC<TestFieldDialogProps> = ({
                     />
                 </FormRow>
             )}
-            <FormRow label="Source" hint="Optional gm.* variable to bind this field to.">
-                <InputText
+            <FormRow
+                label="Source"
+                hint={isCycleField
+                    ? 'Where this column\u2019s value comes from. Leave empty when the sequence records it \u2014 a store_value step is matched to this column by NAME, not by a binding.'
+                    : 'Optional gm.* variable this field reads and writes.'}
+            >
+                <VariableInput
                     value={draft.source ?? ''}
-                    onChange={(e) => setDraft({ ...draft, source: e.target.value || undefined })}
+                    onChange={(v) => setDraft({ ...draft, source: v || undefined })}
+                    catalog={sourceCatalog}
+                    ariaLabel="Choose a source for this field"
+                    pickerTitle="Where does this value come from?"
+                    pickerHint={isCycleField
+                        ? 'A column filled by the sequence needs no Source \u2014 choosing one below clears it, which is correct.'
+                        : 'The Test Setup form writes the operator\u2019s entry to this variable, so only variables a UI may write are listed.'}
                     placeholder="gm.<variable_name>"
                 />
             </FormRow>
@@ -284,10 +339,14 @@ export const TestFieldDialog: React.FC<TestFieldDialogProps> = ({
                 label="Min"
                 hint="Optional lower bound the operator can enter (display units). Blank = no minimum. Or bind it to the machine with an FQDN token like ${gm.press_force_min_n} — for a bound that moves, e.g. a load-cell force ceiling."
             >
-                <InputText
+                <VariableInput
                     value={boundText(draft.min)}
-                    onChange={(e) => setDraft({ ...draft, min: parseBound(e.target.value) })}
-                    className={boundInvalid(draft.min) ? 'p-invalid' : ''}
+                    onChange={(v) => setDraft({ ...draft, min: parseBound(v) })}
+                    invalid={boundInvalid(draft.min)}
+                    catalog={() => boundCatalog(catalogCtx)}
+                    ariaLabel="Bind Min to a machine variable"
+                    pickerTitle="Bind Min to a machine value"
+                    pickerHint="The bound then follows the machine — a load-cell ceiling that changes with the fitted cell, rather than a number that goes stale."
                     placeholder="number or ${gm.…}"
                 />
             </FormRow>
@@ -295,17 +354,25 @@ export const TestFieldDialog: React.FC<TestFieldDialogProps> = ({
                 label="Max"
                 hint="Optional upper bound the operator can enter (display units). Blank = no maximum. Or bind it to the machine with an FQDN token like ${gm.press_force_max_n}."
             >
-                <InputText
+                <VariableInput
                     value={boundText(draft.max)}
-                    onChange={(e) => setDraft({ ...draft, max: parseBound(e.target.value) })}
-                    className={boundInvalid(draft.max) ? 'p-invalid' : ''}
+                    onChange={(v) => setDraft({ ...draft, max: parseBound(v) })}
+                    invalid={boundInvalid(draft.max)}
+                    catalog={() => boundCatalog(catalogCtx)}
+                    ariaLabel="Bind Max to a machine variable"
+                    pickerTitle="Bind Max to a machine value"
+                    pickerHint="The bound then follows the machine — a load-cell ceiling that changes with the fitted cell, rather than a number that goes stale."
                     placeholder="number or ${gm.…}"
                 />
             </FormRow>
             <FormRow label="Default" hint="Applied every time the method loads (operator can override). A literal (display units) like 5, or an FQDN token like ${gm.safe_speed} that snapshots that value on load.">
-                <InputText
+                <VariableInput
                     value={defaultText}
-                    onChange={(e) => setDefaultText(e.target.value)}
+                    onChange={setDefaultText}
+                    catalog={() => boundCatalog(catalogCtx)}
+                    ariaLabel="Use a machine variable as the default"
+                    pickerTitle="Default from a machine value"
+                    pickerHint="A token default SNAPSHOTS the value when the method loads. It is not a live binding — that is what Source is."
                     placeholder="e.g. 5  or  ${gm.safe_speed}"
                 />
             </FormRow>

package/src/components/tis-editor/editor/ViewsEditor.tsx

@@ -3,8 +3,11 @@ import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
 import { FormSection } from '../../forms/FormSection';
+import { moveView, orderedViews } from '../../tis/chartViews';
 import { ChartViewDialog } from './ChartViewDialog';
 import type { ChartView, TestField, TestMethod } from '../types';
+import { chartFieldCatalog } from '../../varpick';
+import type { Catalog } from '@adcops/autocore-varpick';
 
 export interface ViewsEditorProps {
     method: TestMethod;
@@ -19,8 +22,11 @@ interface ViewRow {
 
 export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) => {
     const views = (method.views as Record<string, ChartView>) ?? {};
-    const rows: ViewRow[] = Object.entries(views).map(([id, v]) => ({
-        id, title: v.title ?? '', type: v.type ?? '',
+    // Display order, not id order — the operator sets it with the arrows and
+    // the runtime reads the same `order` key. The first row is the view the
+    // Data tab opens on.
+    const rows: ViewRow[] = orderedViews(views).map(({ name, view }) => ({
+        id: name, title: view.title ?? '', type: view.type ?? '',
     }));
 
     const [dialogOpen, setDialogOpen] = useState(false);
@@ -43,6 +49,28 @@ export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) =>
         'timestamp',
     ];
 
+    // The same names, grouped and described, for the picker button. Built from
+    // `method` rather than from `knownKeys` so each group knows what it IS —
+    // a flat list cannot say that `cycle_index` is per-cycle and `operator` is
+    // per-test, which is the distinction that makes a chart plot a straight
+    // line by accident.
+    const fieldCatalog = (viewType: string): Catalog => chartFieldCatalog({
+        viewType,
+        cycleFields: [
+            ...((method.cycle_config_fields ?? []) as TestField[]).map(f => f.name),
+            ...((method.cycle_fields ?? []) as TestField[]).map(f => f.name),
+            // Written onto every row by the server, declared nowhere.
+            'cycle_index',
+            'timestamp',
+        ].filter(Boolean),
+        resultsFields: ((method.results_fields ?? []) as TestField[]).map(f => f.name).filter(Boolean),
+        rawColumns: Object.keys((method.raw_data as any)?.columns ?? {}),
+        testFields: [
+            ...((method.project_fields ?? []) as TestField[]).map(f => f.name),
+            ...((method.config_fields ?? []) as TestField[]).map(f => f.name),
+        ].filter(Boolean),
+    });
+
     const openNew = () => { setEditingId(null); setDialogOpen(true); };
     const openEdit = (id: string) => { setEditingId(id); setDialogOpen(true); };
 
@@ -57,6 +85,14 @@ export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) =>
         setDialogOpen(false);
     };
 
+    // Move up / down renumbers `order` densely across every view, so the next
+    // move is a swap of adjacent integers whatever the method started as.
+    const handleMove = (idx: number, dir: -1 | 1) => {
+        const next = moveView(views, idx, dir);
+        if (next === views) return;
+        onChange({ ...method, views: next });
+    };
+
     const handleRemove = (id: string) => {
         if (!window.confirm(`Remove view "${id}"?`)) return;
         const next = { ...views };
@@ -64,8 +100,22 @@ export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) =>
         onChange({ ...method, views: next });
     };
 
-    const rowActions = (r: ViewRow) => (
+    const rowActions = (r: ViewRow, opts: { rowIndex: number }) => (
         <div style={{ display: 'flex', gap: '0.25rem' }}>
+            <Button
+                icon="pi pi-arrow-up"
+                className="p-button-text p-button-sm"
+                disabled={opts.rowIndex === 0}
+                onClick={() => handleMove(opts.rowIndex, -1)}
+                aria-label="Move up"
+            />
+            <Button
+                icon="pi pi-arrow-down"
+                className="p-button-text p-button-sm"
+                disabled={opts.rowIndex === rows.length - 1}
+                onClick={() => handleMove(opts.rowIndex, 1)}
+                aria-label="Move down"
+            />
             <Button
                 icon="pi pi-pencil"
                 className="p-button-text p-button-sm"
@@ -85,20 +135,21 @@ export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) =>
         <>
             <FormSection
                 title="Views"
-                description="Named chart definitions rendered by <TestDataView> (cycle_scatter) and <TestRawDataView> (raw_trace)."
+                description="Named chart definitions rendered by <TestDataView> (cycle_scatter) and <TestRawDataView> (raw_trace). Top to bottom is the order the operator sees in the view picker, and the first one is the chart the Data tab opens on."
                 actions={<Button label="Add view" icon="pi pi-plus" size="small" onClick={openNew} />}
             >
                 <DataTable value={rows} dataKey="id" emptyMessage="No views defined.">
                     <Column field="id" header="View ID" />
                     <Column field="title" header="Title" />
                     <Column field="type" header="Type" style={{ width: '8rem' }} />
-                    <Column header="" body={rowActions} style={{ width: '6rem' }} />
+                    <Column header="" body={rowActions} style={{ width: '10rem' }} />
                 </DataTable>
             </FormSection>
             <ChartViewDialog
                 visible={dialogOpen}
                 initial={editingId ? { viewId: editingId, view: views[editingId] } : null}
                 knownKeys={knownKeys}
+                fieldCatalog={fieldCatalog}
                 siblingIds={Object.keys(views)}
                 onCancel={() => setDialogOpen(false)}
                 onSave={handleSave}

package/src/components/tis-editor/types.ts

@@ -104,6 +104,12 @@ export interface ChartView {
      * prints 17-digit ticks.
      */
     x_decimals?: number;
+    /**
+     * Position in the view picker, ascending. Set by the editor's Move
+     * up / Move down; see `components/tis/chartViews.ts` for why the order
+     * cannot just be the order of the keys.
+     */
+    order?: number;
 }
 
 export type RawColumnSource = 'time' | 'derived' | string; // also `ni.<daq>.channels.<name>`

package/src/components/varpick/VariableInput.tsx

@@ -0,0 +1,126 @@
+/**
+ * VariableInput — a text input with a picker button.
+ *
+ * A drop-in replacement for the `<InputText>` inside a `FormRow`, so adding a
+ * picker to a field is a one-line change and the field keeps its label, hint and
+ * error handling.
+ *
+ * Typing still works exactly as before. That is the point: an author who knows
+ * the name types it, and an author who does not gets a list instead of a guess.
+ */
+
+import * as React from 'react';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import {
+    applyInsert,
+    queryFromCaret,
+    type Catalog,
+    type InsertMode,
+    type VariableEntry,
+} from '@adcops/autocore-varpick';
+import { VariablePicker } from './VariablePicker';
+import './varpick.css';
+
+export interface VariableInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    /**
+     * Built when the dialog opens, not on every render — a machine's variable
+     * table is ~100 rows and this sits inside a dialog that re-renders on live
+     * tag traffic.
+     */
+    catalog: () => Catalog;
+    /**
+     * `replace` when the whole field IS one binding (a `source`, a bound);
+     * `caret` when the field is an expression and the pick is one term of it.
+     * Defaults to `replace`, which is what every TIS field is.
+     */
+    mode?: InsertMode;
+    /** Dialog heading and the line under it. */
+    pickerTitle?: string;
+    pickerHint?: React.ReactNode;
+    /** Accessible name for the button — it is icon-only, so this is required. */
+    ariaLabel: string;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+}
+
+export const VariableInput: React.FC<VariableInputProps> = ({
+    value, onChange, catalog, mode = 'replace', pickerTitle, pickerHint,
+    ariaLabel, placeholder, className, disabled, invalid,
+}) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const caret = React.useRef<{ start: number; end: number }>({ start: 0, end: 0 });
+    const [open, setOpen] = React.useState(false);
+    const [built, setBuilt] = React.useState<Catalog>([]);
+
+    // Captured on every selection change rather than read when the button is
+    // clicked: clicking blurs the input, and a blur can reset `selectionStart`
+    // to the end of the value — which would silently turn "replace the word I
+    // am typing" into "append to it".
+    const rememberCaret = () => {
+        const el = inputRef.current;
+        if (!el) return;
+        caret.current = {
+            start: el.selectionStart ?? el.value.length,
+            end: el.selectionEnd ?? el.value.length,
+        };
+    };
+
+    const pick = (entry: VariableEntry) => {
+        const { start, end } = caret.current;
+        const next = applyInsert(value, entry, mode, start, end);
+        onChange(next.value);
+        setOpen(false);
+        requestAnimationFrame(() => {
+            const el = inputRef.current;
+            if (!el) return;
+            el.focus();
+            el.setSelectionRange(next.caret, next.caret);
+            caret.current = { start: next.caret, end: next.caret };
+        });
+    };
+
+    return (
+        <div className="ac-varpick__input">
+            <InputText
+                ref={inputRef}
+                value={value}
+                placeholder={placeholder}
+                disabled={disabled}
+                className={`${className ?? ''}${invalid ? ' p-invalid' : ''}`}
+                onChange={(e) => onChange(e.target.value)}
+                onSelect={rememberCaret}
+                onFocus={rememberCaret}
+            />
+            <Button
+                type="button"
+                icon="pi pi-list"
+                aria-label={ariaLabel}
+                disabled={disabled}
+                className="p-button-outlined"
+                onClick={() => { setBuilt(catalog()); setOpen(true); }}
+            />
+            {open && (
+                <VariablePicker
+                    visible
+                    catalog={built}
+                    title={pickerTitle}
+                    hint={pickerHint}
+                    initialQuery={
+                        mode === 'caret'
+                            ? queryFromCaret(value, caret.current.start, caret.current.end)
+                            : ''
+                    }
+                    onCancel={() => setOpen(false)}
+                    onPick={pick}
+                />
+            )}
+        </div>
+    );
+};
+
+export default VariableInput;

package/src/components/varpick/VariablePicker.tsx

@@ -0,0 +1,168 @@
+/**
+ * VariablePicker — a searchable, described list of the machine's variables.
+ *
+ * ## Why
+ *
+ * Every place the TIS method editor asks an author to name a machine value was
+ * a bare text box: a field's `Source` hinting `gm.<variable_name>`, a bound
+ * hinting `${gm.…}`. Nobody can type a variable out of a program they cannot
+ * see, and a wrong name fails SILENTLY in both directions — a `source` that
+ * names nothing never binds, a bound that resolves to nothing is simply
+ * unbounded.
+ *
+ * Typing is still allowed. The button is additive: it opens the list, shows what
+ * each variable MEANS, and writes the right spelling for the field it came from.
+ *
+ * ## Rules honoured here
+ *
+ *  - **No tooltips, no `title`.** Half the installed base is a touchscreen with
+ *    no hover, so the description is on the row, not behind it.
+ *  - **Pick-then-Insert.** A stray tap in a list must not rewrite a method.
+ *  - **A disabled entry is shown with its reason**, never omitted — hiding it
+ *    answers "where is my variable?" with the same silence as a text box.
+ *
+ * The dialog's own state is deliberately trivial (a query and a selection) and
+ * it is unmounted between openings, so there is no draft here to reseed — see
+ * `useEditDraft` for the fields that DO have one.
+ */
+
+import * as React from 'react';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import {
+    firstChoosable,
+    searchCatalog,
+    type Catalog,
+    type VariableEntry,
+} from '@adcops/autocore-varpick';
+import './varpick.css';
+
+export interface VariablePickerProps {
+    visible: boolean;
+    catalog: Catalog;
+    /** Dialog heading. */
+    title?: string;
+    /** One line saying what picking will do to the field. */
+    hint?: React.ReactNode;
+    /** Seeds the search box — usually the word the caret was sitting in. */
+    initialQuery?: string;
+    onCancel: () => void;
+    onPick: (entry: VariableEntry) => void;
+}
+
+export const VariablePicker: React.FC<VariablePickerProps> = ({
+    visible, catalog, title, hint, initialQuery, onCancel, onPick,
+}) => {
+    const [query, setQuery] = React.useState(initialQuery ?? '');
+    const [selected, setSelected] = React.useState<string | null>(null);
+
+    // Reset on each opening. The dialog is cheap and stateless by design; the
+    // alternative — remembering the last search — means opening the picker on a
+    // different field shows a list filtered for the previous one.
+    React.useEffect(() => {
+        if (visible) setQuery(initialQuery ?? '');
+    }, [visible, initialQuery]);
+
+    const filtered = React.useMemo(() => searchCatalog(catalog, query), [catalog, query]);
+
+    // The highlight follows the search, so Enter always takes the top hit
+    // rather than a stale selection that has scrolled out of view.
+    React.useEffect(() => {
+        setSelected(firstChoosable(filtered)?.id ?? null);
+    }, [filtered]);
+
+    const entryById = (id: string | null): VariableEntry | undefined =>
+        id === null ? undefined : filtered.flatMap(g => g.entries).find(e => e.id === id);
+
+    const confirm = (entry?: VariableEntry) => {
+        const chosen = entry ?? entryById(selected);
+        if (!chosen || chosen.disabled) return;
+        onPick(chosen);
+    };
+
+    const footer = (
+        <div className="ac-varpick__foot">
+            <Button label="Cancel" className="p-button-text" onClick={onCancel} />
+            <Button
+                label="Insert"
+                disabled={entryById(selected) === undefined}
+                onClick={() => confirm()}
+            />
+        </div>
+    );
+
+    return (
+        <Dialog
+            header={title ?? 'Insert a variable'}
+            visible={visible}
+            onHide={onCancel}
+            footer={footer}
+            style={{ width: '44rem', maxWidth: '95vw' }}
+        >
+            {hint && <div className="ac-varpick__hint">{hint}</div>}
+
+            <InputText
+                className="ac-varpick__search"
+                value={query}
+                autoFocus
+                placeholder="name, or what it means — try “load” or “EL3356”"
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={(e) => {
+                    if (e.key === 'Enter') { e.preventDefault(); confirm(); }
+                }}
+            />
+
+            {filtered.length === 0 ? (
+                <div className="ac-varpick__empty">
+                    {catalog.length === 0
+                        ? 'Nothing to pick from. The machine published no variables — the server may be an older build without gm.get_variables.'
+                        : `No variable matches “${query}”.`}
+                </div>
+            ) : (
+                <div className="ac-varpick__list">
+                    {filtered.map(group => (
+                        <div className="ac-varpick__group" key={group.id}>
+                            <div className="ac-varpick__grouphead">
+                                <span className="ac-varpick__grouptitle">{group.title}</span>
+                                {group.hint && <span className="ac-varpick__grouphint">{group.hint}</span>}
+                            </div>
+                            {group.entries.map(entry => (
+                                <button
+                                    type="button"
+                                    key={entry.id}
+                                    className={
+                                        'ac-varpick__row'
+                                        + (entry.id === selected ? ' ac-varpick__row--on' : '')
+                                        + (entry.disabled ? ' ac-varpick__row--off' : '')
+                                    }
+                                    aria-pressed={entry.id === selected}
+                                    disabled={!!entry.disabled}
+                                    onClick={() => setSelected(entry.id)}
+                                    onDoubleClick={() => confirm(entry)}
+                                >
+                                    <span className="ac-varpick__line">
+                                        <code className="ac-varpick__name">{entry.name}</code>
+                                        {entry.label && <span className="ac-varpick__label">{entry.label}</span>}
+                                        {entry.unit && <span className="ac-varpick__chip">{entry.unit}</span>}
+                                        {entry.type && <span className="ac-varpick__chip">{entry.type}</span>}
+                                        {entry.live !== undefined && (
+                                            <span className="ac-varpick__live">now {entry.live}</span>
+                                        )}
+                                    </span>
+                                    {entry.description && (
+                                        <span className="ac-varpick__desc">{entry.description}</span>
+                                    )}
+                                    {entry.disabled && <span className="ac-varpick__why">{entry.disabled}</span>}
+                                    {entry.note && <span className="ac-varpick__note">{entry.note}</span>}
+                                </button>
+                            ))}
+                        </div>
+                    ))}
+                </div>
+            )}
+        </Dialog>
+    );
+};
+
+export default VariablePicker;

package/src/components/varpick/index.ts

@@ -0,0 +1,22 @@
+/**
+ * The variable picker: a field with a button that opens a searchable, described
+ * list of the machine's variables.
+ *
+ * The model (catalog shape, search ranking, caret-aware insertion, the `${fqdn}`
+ * token grammar) lives in `@adcops/autocore-varpick`, which has no UI in it —
+ * the sequence editor renders the same model with a different widget layer, and
+ * neither package may import the other's.
+ */
+
+export { VariablePicker } from './VariablePicker';
+export type { VariablePickerProps } from './VariablePicker';
+export { VariableInput } from './VariableInput';
+export type { VariableInputProps } from './VariableInput';
+export {
+    boundCatalog,
+    chartFieldCatalog,
+    configSourceCatalog,
+    cycleSourceCatalog,
+    rawSourceCatalog,
+} from './tisCatalogs';
+export type { TisCatalogContext } from './tisCatalogs';