Editor Workflows
Mention Picker
A compact mention field types @ma, reveals one large teammate result, highlights it and resolves into a clear @maya token sized for the public canvas.
csslight complexitysubtle motionclickmobile-readyaccessible
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
Worth keeping?
Votes steer what gets built next — sign in to cast one, free to read
When to use it
Team editors, assignments, comments and collaboration controls that need a concise mention-autocomplete microinteraction.
When not to
A production combobox with remote results, many matches, focus management or directory virtualization is required.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Replace Maya's initials, name, role and final token, then update vals to match the new query. Keep one result only so the picker remains legible as a small tile; re-theme through --pro-* tokens.
Safe to edit
- theme tokens (:root --pro-* values)
- teammate initials, name, role and inserted token
- typed query sequence in vals
- field and result sizing
Keep intact
- :root --pro-* token block (shared professional theming API)
- role=button, tabindex and descriptive aria-label on .mnp-stage
- IIFE wrapper, reduced-motion inserted state and visibilitychange pause
- unique mnp- class namespace and theme hook
Known limitations
- The picker is a scripted visual rather than a production ARIA combobox
- One fixed local result is shown to protect clarity at tile scale
- Light re-theme uses the --pro-* block; catalog bg/accent describe the dark default
More Editor Workflows components
- Markdown SplitA focused Markdown control flips between readable source and rendered preview, with one large two-state selector designed to stay legible inside a 300px…
- Comment ComposerA single reply control types a useful comment, presses its send action and resolves to a clear sent state without shrinking into a miniature discussion…
- Autosave DraftOne document-status control moves from edited to saving to saved, morphing a neutral dot into a spinner and confirmation mark at clear 300px-tile scale.
- Suggested EditsOne focused inline revision replaces a vague phrase with an exact result, then demonstrates both accept and reject outcomes with large controls.
- Focus WritingA compact focus-mode control turns on, then moves a crisp reading spotlight across three short lines while surrounding copy recedes.