Comments / 14 primitives + composition

Comments & annotations

Figma- and Loom-style collaborative primitives for Mufflermen workshop docs, design specs, floor plans, and recordings — distinct from inbox messaging and AI assistant chat.

Production answer

Comments & annotations is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Comments & annotations states
Generative search brief

Comments & annotations: Figma- and Loom-style collaborative primitives for Mufflermen workshop docs, design specs, floor plans, and recordings — distinct from inbox messaging and AI assistant chat.

Visual reference only — collaboration is not wired
Primitive 01

Inline comment thread

Anchored thread: pin badge, root bubble, replies stack, composer, resolve toggle.

Composition · statefulOpen
Primitive 02

Comment bubble

Single bubble with avatar, role chip, body, reactions, reply CTA, kebab.

StatelessOpen
Primitive 03

Annotation pin

Numbered, positioned pin with pulse + tone-by-status. Reduced motion disables pulse.

Stateless · animationOpen
Primitive 04

Comment composer

Textarea + mention picker + attach + emoji + draft auto-save + send.

Stateful · textareaOpen
Primitive 05

Reaction tray

Persistent reaction row on every comment with aria-pressed for own reactions.

Stateful · toggleOpen
Primitive 06

Resolve toggle

Resolve / unresolve toggle with checkbox glyph and resolve-with-note expander.

Stateful · expandOpen
Primitive 07

Mention picker

Typeahead @mention popover — users, teams, roles — arrow-key navigable.

Stateful · keyboardOpen
Primitive 08

Thread side panel

Right rail listing threads with Open / Resolved / @me filter chips + selected highlight.

Stateful · filterOpen
Primitive 09

Activity stream

Verb-chipped timeline: commented, replied, resolved, reopened, mentioned, liked.

Stateless · timelineOpen
Primitive 10

Sticky note

Figma-style floating sticky with author chip, body, drag affordance, tone variants.

Stateless · visualOpen
Primitive 11

Pin marker overlay

Positioned pin layer over any target surface — image, SVG, canvas.

Stateless · layoutOpen
Primitive 12

Subscription row

Follower avatars + bell toggle to subscribe / unsubscribe from a thread.

Stateful · toggleOpen
Primitive 13

Reply card

Indented nested reply card with smaller author header — used inside threads.

StatelessOpen
Primitive 14

Editor inline comments

Prose with highlighted ranges that expose tooltip threads on hover / focus.

Stateless · hoverOpen
Composition

Full canvas annotation board

Workshop floor-plan with 6 pins + thread side panel + activity stream below.

CompositionOpen