Autocomplete pickers for `/`-style commands or `@`-style mentions are locked to single input surfaces — rewriting them for a textarea, a code editor, a sheet cell, or a whiteboard note means duplicating state machine logic, anchor math, and keyboard handling. Without a reusable primitive, each surface reinvents detection, filtering, and insertion, losing consistency and making the agent contract (stable handles, JSON-friendly inputs) impossible to standardize across editor types.

InputTag is a headless, surface-agnostic autocomplete picker that floats near any text surface via a small adapter contract. It accepts triggers (a record mapping trigger characters like "/" or "@" to items, filters, and insert functions), detects active triggers by walking back from the caret, filters the item pool, renders a fixed-position menu, and writes the selected item back through adapter.replaceRange(). The adapter abstracts the surface's read/write/caret/keydown contract; a textarea adapter runs 20–40 lines.

Import InputTag and InputTagAdapter from @particle-academy/react-fancy, write a small adapter conforming to the InputTagAdapter interface (or use a pre-built one like textareaAdapter(ref)), then render <InputTag adapter={adapter} triggers={{ "/": { items: commands, insert: (c) => `${c.name} ` } }} /> alongside your surface. The component handles caret detection, filtering, keyboard navigation (arrow/enter/escape), and fires onPick whenever the user selects an item.