∞ forever components

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

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
1

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
  • demo-v1 preview lifecycle: initialize demoEnabled from window.__foreverPreview and stop attract work on the window forever:interactive event; retain manual feedback, settling, cleanup and explicit sessions

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
  • State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

mentionpeople-pickerautocompleteeditorcollaborationdropdowntoken-inputproduct-ui

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.
  • VCA Audio CompressorVCA Audio Compressor control in the Sam Creates system.