# InlineEdit

The commit-once exception to Ink: create-inputs and rename overlays inside navigating links, de-chromed to match Ink at rest. The input wears the display's exact box.

Install: `npx candlelight-ds add inline-edit`

Category: primitive · Grammar: G8

## Use when

Create-by-naming flows (typing then Enter creates) and renames overlaid on a link, where continuous save would create-on-idle.

## Don't use when

Any text that lives — that's Ink.

## States

- display (truncating block)
- editing (seamless input)
- empty (placeholder)

## Keyboard

- `Enter` — commits once
- `Esc` — cancels, restores the display
- `double-click` — enters editing (optional)

## Acceptance tests

- No border, fill, or padding delta between display and input — the caret is the only mode.
- The display face is a block so truncation actually clips (overflow is inert on inline boxes).

## Files

- components/ui/InlineEdit.tsx

npm dependencies: @candlelight-ds/tokens, clsx, tailwind-merge

Rendered twin: https://candlelight-docs.vercel.app/components/inline-edit · Full spec: https://candlelight-docs.vercel.app/spec.md