feat(snippets): complete a snippet name as you type it

[mindaugaskasp]

Why

A library grown over months is full of near-repeats — Deploy — prod, Deploy — staging, Deploy — dev — and the shared head was retyped every time. Both name fields were bare <input>s; the only naming help was SnippetNameHint, which lists {{token}}s rather than completing what you're typing. The cost is highest in the launcher, which exists to be fast.

The rule

Shell-completion semantics. Complete to the longest common prefix of every name that matches what's been typed; complete to the whole name only when exactly one matches. Typing Dep against those three gives Deploy — and stops.

That is the whole design, and it's why this is worth building rather than a "did you mean". It never invents the part that tells two snippets apart — Deploy — dev appearing when you meant staging is worse than no suggestion. It's also a pure function of (typed, names), so it unit-tests without a mount.

How it renders

A two-layer field: an overlay behind the input carries a transparent copy of the typed text (to occupy its exact width) followed by the ghost in --text-dim, with the real input opaque on top. Unlike the body highlighter added in #34, the input keeps its own text — so native selection and caret rendering are untouched.

The ghost is never part of the input's value. Selection, copy and the saved name can only contain what was typed or accepted. The e2e asserts that at every step, not just at the end.

Pieces

• utils/nameComplete.js — the pure rule, plus indexableNames(), which leaves secret snippets out: their guarantee is about contents, but a secret's name hints at what it is, and offering that inside an unrelated snippet leaks intent.
• composables/useNameComplete.js — accept keys and the scroll mirror. Tab accepts anywhere; → only from the caret's end, where it would do nothing anyway. Escape is deliberately neither — it already closes the compose panel, and one key with two meanings in one field is how feat(quick-look): capture a snippet without leaving the home row #34's keyboard bugs happened.
• composables/useSnippetNameComplete.js — the three-line store binding, kept apart so the above stays Pinia-free.
• SnippetNameField.vue — one component for both surfaces, so the ghost markup exists once. It owns SnippetNameHint too, since both are help for naming this snippet.
• .ghost-field in ui.css sets every metric that decides where a glyph lands on one selector for both layers; changing one alone detaches the ghost from the caret.

Themes

No new token. The ghost is hint ink, so it reuses --text-dim — the token both placeholders already use, already floored at 3.0 by check-theme-depth.mjs:134. Worst of the 14 is sepia at 3.44 on the panel; --text scores 9.77–21 on the same grounds, so typed and suggested text are never confusable. Full parsed table in the spec.

A snippet-name-ghost probe is added to theme-sweep's SURFACES — the ghost's relative weight is the one thing a contrast table can't settle. That also closes a finding carried from #34.

Two caps, both resolved by splitting

SnippetEditorDialog.vue's script sat at exactly 100 on main, so one new import broke it — fixed by moving SnippetNameHint into SnippetNameField, which nets the import back to zero and is the better shape anyway. useQuickLook.js went over when the index was first threaded through as a prop; that plumbing came out entirely once it was clear both windows own an instance of the same store. No prettier-ignore anywhere.

Testing

• npm run check → exit 0. Coverage 95.18 / 88.02 / 95.91 / 96.17, all above floors.
• 21 new unit tests across nameComplete and useNameComplete, both written before their source and watched failing. The LCP rule additionally proved by swapping in a naive first-match — 2 tests went red, green on restore.
• 50 e2e passed on the host across both surfaces and every snippet/launcher spec.

Spec: specs/2026-08-08-snippet-name-autocomplete/plan.md

🤖 Generated with Claude Code