@adcops/autocore-react 3.5.9 → 3.5.13

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

@@ -8,6 +8,8 @@ import { FormRow } from '../../forms/FormRow';
 import { useEditDraft } from '../../forms/useEditDraft';
 import { DEFAULT_X_DECIMALS } from '../../tis/TestDataView';
 import type { ChartAxis, ChartSeries, ChartView } from '../types';
+import { VariableInput } from '../../varpick';
+import type { Catalog } from '@adcops/autocore-varpick';
 
 /** Upper bound on the editor's X-decimals spinner. Past ~6 the tick labels
  *  are wider than the gap between them, which is the problem this setting
@@ -31,6 +33,16 @@ export interface ChartViewDialogProps {
     onSave: (viewId: string, view: ChartView) => void;
     /** Known field/column names; offered as datalist suggestions. */
     knownKeys: string[];
+    /**
+     * The same names, grouped and described, for the picker button.
+     *
+     * Takes the view TYPE because it decides which list is the likely answer:
+     * a `raw_trace` plots trace columns, a `cycle_scatter` plots cycle fields.
+     * A datalist alone was not enough — it only appears once you start typing,
+     * which is no help when you do not know what to type, and it does not open
+     * at all on a touchscreen.
+     */
+    fieldCatalog?: (viewType: string) => Catalog;
     /** Other view ids already in use — for uniqueness validation. */
     siblingIds: string[];
 }
@@ -42,7 +54,7 @@ const blank = (): ChartView => ({
 });
 
 export const ChartViewDialog: React.FC<ChartViewDialogProps> = ({
-    visible, initial, onCancel, onSave, knownKeys, siblingIds,
+    visible, initial, onCancel, onSave, knownKeys, siblingIds, fieldCatalog,
 }) => {
     // One draft covering both edited values (the id is editable too), seeded
     // once per open. Keyed on the view id rather than on `initial` — the
@@ -124,10 +136,13 @@ export const ChartViewDialog: React.FC<ChartViewDialogProps> = ({
                 />
             </FormRow>
             <FormRow label={isRawTrace ? 'X column' : 'X field'} required>
-                <InputText
+                <VariableInput
                     value={(draft.x[axisKey] as string) ?? ''}
-                    onChange={(e) => setAxis({ [axisKey]: e.target.value } as ChartAxis)}
-                    list="known-keys"
+                    onChange={(v) => setAxis({ [axisKey]: v } as ChartAxis)}
+                    catalog={() => fieldCatalog?.(draft.type) ?? []}
+                    ariaLabel="Choose the X axis column"
+                    pickerTitle="X axis"
+                    pickerHint="A chart naming a column that does not exist draws an empty plot with no error, which reads as “the machine recorded nothing”."
                 />
             </FormRow>
             <FormRow label="X label">
@@ -173,11 +188,13 @@ export const ChartViewDialog: React.FC<ChartViewDialogProps> = ({
                         alignItems: 'center',
                     }}
                 >
-                    <InputText
+                    <VariableInput
                         placeholder={isRawTrace ? 'column' : 'field'}
                         value={(s[axisKey] as string) ?? ''}
-                        onChange={(e) => setSeries(i, { [axisKey]: e.target.value } as ChartSeries)}
-                        list="known-keys"
+                        onChange={(v) => setSeries(i, { [axisKey]: v } as ChartSeries)}
+                        catalog={() => fieldCatalog?.(draft.type) ?? []}
+                        ariaLabel={`Choose the column for series ${i + 1}`}
+                        pickerTitle="Y series"
                     />
                     <InputText
                         placeholder="label"

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

@@ -148,6 +148,7 @@ export const FieldArrayEditor: React.FC<FieldArrayEditorProps> = ({ arrayKey, me
                 siblingNames={fields.map(f => f.name)}
                 isResultsField={arrayKey === 'results_fields'}
                 isCycleConfigField={arrayKey === 'cycle_config_fields'}
+                isCycleField={arrayKey === 'cycle_fields'}
                 cycleFieldNames={(method.cycle_fields ?? []).map(f => f.name).filter(Boolean)}
                 resultsFieldNames={(method.results_fields ?? []).map(f => f.name).filter(Boolean)}
                 onCancel={() => setDialogOpen(false)}

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

@@ -13,6 +13,9 @@ import type { TestField, AggFn, AggFrom, AggScope, AggregateSpec } from '../type
 // 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 }[] = [
@@ -74,15 +77,25 @@ 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 = [],
 }) => {
+    // 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
@@ -120,6 +133,24 @@ export const TestFieldDialog: React.FC<TestFieldDialogProps> = ({
         [scales],
     );
 
+    // 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.
     const coerceDefault = (s: string): unknown => {
@@ -275,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>
@@ -297,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>
@@ -308,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

@@ -6,6 +6,8 @@ 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;
@@ -47,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); };
 
@@ -125,6 +149,7 @@ export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) =>
                 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/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';