← All components Editors

InlineEditPopover

Cursor's Cmd+K floating prompt. Anchored to selection, auto-grow textarea, optional model + context picker slots.

Inspired by Cursor inline-edit (cursor.com/docs/inline-edit/overview).

Preview

What it looks like.

// Selection in the editor:

return useMemo(() => data.filter(d => d.active), [data])

Usage

Drop it into your app.

import { InlineEditPopover, ModelSelector } from '@locara/components'

const [open, setOpen] = useState(false)
const [anchor, setAnchor] = useState<DOMRect | null>(null)

<InlineEditPopover
  open={open}
  anchor={anchor}
  side="below"
  onSubmit={(prompt) => llm.edit({ selection, prompt }).then(applyDiff)}
  onCancel={() => setOpen(false)}
  modelPickerSlot={<ModelSelector size="sm" {...modelProps} />}
  busy={isGenerating}
  onStop={() => llm.cancel()}
/>

Or copy the source into your repo: locara add inline-edit-popover

Design notes

Why it works this way.

Controlled primitive: the consumer manages open state, anchor, and the AI call. The popover handles positioning (with viewport clamping), focus management, auto-growing textarea, and the keymap. Pairs with DiffView for the inline-diff result.