Attach to the position: relative container — the overlay's containing block.
The hint float (function autocomplete + signature preview). Render anywhere in the chrome.
Attach to the real <input> (alongside api.inputProps.ref).
'formula' grammar, while engaged: an operand is expected at the caret (the "input expected"
marker is showing — trailing =A1+|, or a cleared argument =SUM(|,A1:C3)). The user is 99%
mid-typing — chromes should NOT present api.error as "invalid" while this holds (the commit
gate still blocks an incomplete accept). Only while the input has focus: text left that way is
an error, even though a blur while pointing keeps the field engaged.
Handlers for the <input> — scroll sync, hover eval hit-testing, caret tracking.
A press on the field means "select", never "move the text" — see useTextSelectionDrag.
Clicking back into the field re-summons a dismissed hint popup (Excel-style).
Chain AFTER api.inputProps.onSelect — tracks the caret for the paren-pair emphasis.
true while the coloring overlay paints the glyphs — the input's own text should go
color: transparent (keep the caret via caretColor).
The measured coloring overlay (null while inactive/unmeasured). Render inside the container.
The hover eval bubble, portaled to document.body (null when nothing is hovered).
What useFormulaInputParts hands a field chrome. Wire the three refs (the positioned container is the overlay's containing block; the input is what gets measured), spread FormulaInputParts.inputHandlers onto the
<input>(merging with the chrome's own), make the input's glyphs transparent while FormulaInputParts.overlayActive, and render FormulaInputParts.overlayElement inside the container and FormulaInputParts.tipElement anywhere (it portals todocument.body).