Component catalog

Map Velt comment surfaces to primitives, wireframes, props, feature flags, variables, and references.

Source of truth: exhaustive for what it covers. Generated from Velt customization metadata. If a name isn’t on this page (or its linked companions), it doesn’t exist: don’t use it. Never invent or guess a name; use only identifiers that appear verbatim here or in the companion references, or that you verified against ground truth and added here. Scope: comments are mapped exhaustively (primitive ↔ wireframe); other features are summarized at the end: see the companion references for their complete data.

Maps each comment surface to its primitive component and its wireframe family: a quick orientation. Comments are covered in depth; other features are summarized at the end (see Other features).

Companion references (use these for the complete data):

• Wireframe components: all 82 wireframe components + full slot trees + slot input props.
• Primitives: all 491 primitive components (incl. every sub-component).
• Component config: layout/mode props (filter layout, embed mode, panel mode, …).
• CSS classes: structural + stateful CSS classes.
• Wireframe variables: the {variable} catalog.

The slot trees on this page are an orientation overview; the complete trees + slot props live in Wireframe components. Don’t invent names.

---

Comments: primitives ↔ wireframes

Surface	Primitive component	Wireframe component
Comments host (pins on page)	VeltComments	(uses dialog/pin/bubble wireframes)
Comment dialog (a thread)	VeltCommentDialog	VeltCommentDialogWireframe
Single thread (standalone)	VeltCommentDialog (use this) · VeltCommentThread (deprecated)	VeltCommentDialogWireframe
Comments sidebar	VeltCommentsSidebar	VeltCommentsSidebarWireframe
Comments sidebar (V2)	VeltCommentsSidebarV2	VeltCommentsSidebarV2Wireframe
Sidebar toggle button	VeltSidebarButton / VeltCommentsSidebarButton	VeltSidebarButtonWireframe / VeltCommentsSidebarButtonWireframe
Comment pin	VeltCommentPin	VeltCommentPinWireframe
Comment bubble	VeltCommentBubble	VeltCommentBubbleWireframe
Composer (standalone)	VeltCommentComposer	VeltCommentComposerWireframe
Multi-thread dialog	VeltMultiThreadCommentDialog	VeltMultiThreadCommentDialogWireframe
Inline comments section	VeltInlineCommentsSection	VeltInlineCommentsSectionWireframe
Text comment (tool)	VeltTextComment	VeltTextCommentToolbarWireframe / VeltTextCommentToolWireframe
Text comment thread (inline render)	VeltCommentText (renders velt-comment-text; distinct from VeltTextComment the tool)	(no wireframe: props + CSS)
Canvas comment (anchored to canvas coord)	VeltCanvasComment (canvasId, position)	(no wireframe: props + CSS)
Chart comment (anchored to data point)	VeltChartComment	(no wireframe: props + CSS)
Highcharts comments (integration)	VeltHighChartComments (maps Highcharts points → VeltChartComment)	None
Nivo chart comments (integration)	VeltNivoChartComments (maps Nivo points → VeltChartComment)	None
Comments minimap	VeltCommentsMinimap	(no wireframe: props + CSS)
Generic action button (in wireframes)	None	VeltButtonWireframe

Dialog dropdown sub-wireframes also exist: VeltCommentDialogOptionsDropdownTriggerWireframe / …ContentWireframe, and the same for Status and Priority dropdowns.

Snippyly* names are the legacy pre-”Velt” brand. Internally the SDK still defines components under Snippyly* directory/identifier names (SnippylyComments, SnippylyCommentTool, SnippylyPresence, …): Snippyly was Velt’s former product name. The package re-exports each one only under its Velt* name; there are no public Snippyly* exports to import. Always use the Velt* equivalent (SnippylyComments → VeltComments, SnippylyCommentTool → VeltCommentTool, …).

---

Surface lookup: props · flags · variables · refs (the one-stop map)

One entry per surface, so you can resolve everything for a surface from a single place. Each lists the primitive, the root wireframe (registering it is what turns shadow DOM off for that surface: see CSS and decision-tree S6), the key props a customization typically sets, the off-by-default flags to enable if the design shows them, and the key {variables} for dynamic markup. These are the common identifiers: the exhaustive lists are Props, Feature flags, and Wireframe variables; slot trees are Wireframe components. Never use a name that isn’t in those (R10).

Root-wireframe note: each surface’s top-level Velt…Wireframe below is its root: registering it removes that surface’s own shadow DOM (class CSS reaches it). Dialog and pin are verified in-browser in Wireframe components. Nested/leaf-only wireframes don’t remove shadow: set shadowDom={false} there.

Comments

Comment dialog (a thread)

• Primitive VeltCommentDialog · Root VeltCommentDialogWireframe (root: shadow auto-off, verified)
• Key props: annotationId, variant, commentPinType, readOnly, messageTruncation, fullExpanded
• Off-by-default flags: priority, replyAvatars, commentIndex, sidebarButtonOnCommentDialog, formatOptions
• Key variables: {annotation.status.id} (OPEN/IN_PROGRESS/RESOLVED), {annotation.priority.id}, {annotation.comments.length}, {annotation.unreadCount}, {annotation.assignedTo}
• Refs: Wireframes · slot tree below / Wireframe components. Gotcha: ThreadCard must nest in Body → Threads.

Comment pin

• Primitive VeltCommentPin · Root VeltCommentPinWireframe (root: “replaces the whole pin”, verified)
• Key props: annotationId, variant, context, locationId
• Off-by-default flags: commentIndex (the on-pin number), deviceInfo, commentPinHighlighter
• Key variables: {annotation.status.id}, {annotation.annotationIndex}, {annotation.annotationNumber}, {annotation.priority.name}, {annotation.unreadCount}
• Refs: Wireframe components. Gotcha: Index/Number slots are empty containers: print with <velt-data field="annotation.annotationIndex">; page-mode comments have no index/number.

Comment bubble

• Primitive VeltCommentBubble · Root VeltCommentBubbleWireframe
• Key props: targetElementId, avatar, variant, commentCountType, annotationId, context
• Off-by-default flags: bubbleOnPin (bubbleOnPinHover is on by default)
• Key variables: {annotation.status.id}, {annotation.comments.length}, {annotation.unread}, {annotation.unreadCount}
• Refs: Wireframe components.

Comments sidebar (V1)

• Primitive VeltCommentsSidebar · Root VeltCommentsSidebarWireframe
• Key props: embedMode, variant, position, pageMode, filterConfig, filterPanelLayout, focusedThreadMode, readOnly
• Key variables: {focusedAnnotation}, {appliedFiltersCount}, {unreadCommentAnnotationCount}, {noCommentsFound}
• Refs: slot tree below / Wireframe components · Component config (filters). Gotcha: container slots drop undeclared children: declare the full tree.

Comments sidebar (V2)

• Primitive VeltCommentsSidebarV2 · Root VeltCommentsSidebarV2Wireframe
• Key props: embedMode (string in V2), position, variant, dialogVariant, filterPanelLayout, pageMode, focusedThreadMode, darkMode
• Config: filters / miniFilters / minimalFilters, filterOperator (Component config)
• Key variables: {focusedAnnotation}, {appliedFiltersCount}, {noCommentsFound}
• Refs: slot tree below / Wireframe components.

Sidebar toggle button

• Primitive VeltSidebarButton / VeltCommentsSidebarButton · Root VeltSidebarButtonWireframe / VeltCommentsSidebarButtonWireframe
• Key props: variant, position, sidebarVariant, filterPanelLayout, commentCountType, sidebarShadowDom, pageMode
• Refs: Props.

Comment tool

• Primitive VeltCommentTool · Root VeltCommentToolWireframe
• Key props: targetElementId, variant, context, locationId, disabled
• Off-by-default flags: contextInPageModeComposer (on VeltCommentTool)
• Refs: Props · Context.

Inline comments section

• Primitive VeltInlineCommentsSection · Root VeltInlineCommentsSectionWireframe
• Key props: config, targetElementId, variant, dialogVariant, composerVariant, composerPosition, multiThread, fullExpanded, readOnly
• Key variables: {annotations}, {filterState.filters}, {sortState.sortBy}, {featureState.readOnly}
• Refs: Comment surfaces.

Text comment

• Primitive VeltTextComment · Root VeltTextCommentToolWireframe / VeltTextCommentToolbarWireframe
• Key props: annotationId, multiThreadAnnotationId
• Key variables: {annotation.status.id}, {totalComments}, {selectedWordsCount}
• Refs: Comment surfaces.

Multi-thread comment dialog

• Primitive VeltMultiThreadCommentDialog · Root VeltMultiThreadCommentDialogWireframe
• Key props: annotationId, multiThreadAnnotationId, variant, commentPinType, dialogVariant, inboxMode, readOnly, context
• Key variables: {filteredAnnotations}, {commentPinSelected}, {minimalFilter}, {noCommentsFound}
• Refs: Comment surfaces.

Comment composer (standalone)

• Primitive VeltCommentComposer · Root VeltCommentComposerWireframe
• Key props: variant, dialogVariant, context, locationId, documentId, folderId, targetComposerElementId, placeholder, readOnly, darkMode
• Refs: Wireframe components · Props.

Comments minimap

• Primitive VeltCommentsMinimap · no wireframe (style via props + CSS)
• Key props: position, targetScrollableElementId
• Off-by-default: minimap renders nothing until enabled: call commentElement.enableMinimap() (disable with disableMinimap()). Not gated by a JSX flag.
• Refs: Comment surfaces.

Notifications

Notifications panel

• Primitive VeltNotificationsPanel · Root VeltNotificationsPanelWireframe
• Key props: tabConfig, panelOpenMode, settings, settingsLayout, variant, pageSize, darkMode, shadowDom
• Off-by-default flags: settings, enableSettingsAtOrganizationLevel, selfNotifications, readNotificationsOnForYouTab, enableCrossOrganization
• Key variables: {selectedTab}, {notification} (.type/.from.name/.read/.createdAt/.documentName/.count), {unreadNotificationsForYou}, {notificationsPanelVisible}
• Refs: Notifications.

Notifications tool (bell)

• Primitive VeltNotificationsTool · Root VeltNotificationsToolWireframe
• Key props: tabConfig, panelOpenMode, panelVariant, settings, variant, panelShadowDom, pageSize, darkMode
• Key variables: {unreadNotificationsForYou}, {notification} (per-item, in the panel)
• Refs: Notifications.

Notifications history

• Primitive VeltNotificationsHistoryPanel · (rendered inline; no separate root wireframe)
• Key props: embedMode, onNotificationClick, darkMode
• Refs: Notifications.

Notifications bottom sheet (mobile)

• Internal container velt-notifications-bottom-sheet-internal: no public Velt* React wrapper; the bell/panel open mode mounts the NotificationsPanel inside a MatBottomSheet on mobile.
• Key props: pageSize (passed through to the panel). The panel renders in bottom-sheet mode (.bottom-sheet class): reuses VeltNotificationsPanelWireframe for content.
• Refs: Notifications.

---

VeltCommentDialogWireframe slot tree

The slots are static properties on VeltCommentDialogWireframe (and its nested .ThreadCard / .Composer / .AssigneeBanner / options content). They’re flat: you choose how to arrange them in your layout. Fill the ones you want; the rest fall back to defaults.

This is the complete top-level set (the deeper tree is in Wireframe components):

VeltCommentDialogWireframe.*  (top-level slots)
  Header  Status  Priority  CopyLink  ResolveButton  UnresolveButton  Options
  CloseButton  NavigationButton  CommentIndex  CommentNumber  Approve  DeleteButton
  AssignMenu  VisibilityBanner  VisibilityDropdown  PrivateBanner  GhostBanner
  AssigneeBanner  Body  Threads  ThreadCard  Composer  ToggleReply  HideReply  MoreReply
  AllComment  ReplyAvatars  CommentCategory  CustomAnnotationDropdown  SignIn  Upgrade
  AgentSuggestion  SuggestionAction  CommentSuggestionStatus

VeltCommentDialogWireframe.ThreadCard.*
  Avatar  Name  Time  Edited  Draft  Unread  DeviceType  Message  Attachments
  Recordings  Reactions  ReactionTool  ReactionPin  Options  AssignButton
  SeenDropdown  Reply  EditComposer

VeltCommentDialogWireframe.AssigneeBanner.*
  UserAvatar  UserName  ResolveButton  UnresolveButton

VeltCommentDialogWireframe.Composer.*
  Avatar  Input  ActionButton   (ActionButton has a `type` prop: e.g. "submit",
                                 "attachments", "userMentions", and more; see source)

Options dropdown content (VeltCommentDialogOptionsDropdownContentWireframe).*
  Edit  Delete  Assign  MakePrivate  Notification  MarkAsRead

Deeper nesting and each slot’s props are in Wireframe components. Use that for the exact prop on a given slot.

Behavior lives in these slots (resolve, delete, submit, etc.): your markup goes inside a slot as its appearance (see the interactivity rule).

---

Sidebar slot trees

VeltCommentsSidebarWireframe: commonly-used slots (the complete set is in Wireframe components):

VeltCommentsSidebarWireframe
├── .Skeleton                         (loading state markup)
└── .Panel
    ├── .MinimalFilterDropdown
    │   ├── .Trigger
    │   └── .Content → .SortDate  .SortUnread  .FilterResolved  .FilterAssignedToMe
    ├── .PageModeComposer             (page-mode composer)
    ├── .EmptyPlaceholder             (often gated with velt-if="{noCommentsFound}")
    └── .List                         (the rendered comment list)

VeltCommentsSidebarV2Wireframe: complete top-level slots:

VeltCommentsSidebarV2Wireframe.*
  Skeleton  Panel  Header  List  EmptyPlaceholder  PageModeComposer
  FilterButton  FilterContainer  FilterDropdown  FocusedThread  Search
  FullscreenButton  CloseButton

The full sidebar slot trees (V1 and V2, including composer attachments image/other → delete/download/loading, thread-card assign-button, reply-avatars, comment-bubble comments-count, …) are in Wireframe components.

---

How to find the complete slot list for a feature

1. Wireframe components: the full slot tree + slot props for every wireframe.
2. Wireframe variables: every {…} variable, grouped by feature.
3. To confirm what a specific element renders as, inspect it in DevTools (shadowDom={false}) and look for velt-*-wireframe tags.

---

Other features (brief)

Each has a primitive + (usually) a wireframe family; see Other features:

Feature	Primitive(s)	Wireframe(s)
Notifications	VeltNotificationsTool, VeltNotificationsPanel, VeltNotificationsHistoryPanel	VeltNotificationsToolWireframe, VeltNotificationsPanelWireframe (+ velt-notifications-bottom-sheet-internal mobile container: internal, no Velt* wrapper)
Reactions	VeltReactionTool	VeltReactionToolWireframe, VeltReactionPinWireframe, VeltReactionsPanelWireframe, VeltReactionPinTooltipWireframe
Inline reactions section	VeltInlineReactionsSection	VeltInlineReactionsSectionWireframe
Presence	VeltPresence	VeltPresenceWireframe, VeltPresenceTooltipWireframe
Cursors	VeltCursor	VeltCursorPointerWireframe
Recorder	VeltRecorderControlPanel, VeltRecorderPlayer, VeltRecorderTool, VeltRecorderNotes	VeltRecorderControlPanelWireframe, VeltRecorderPlayerWireframe, VeltRecorderPlayerExpandedWireframe, VeltRecorderAudioToolWireframe, VeltRecorderVideoToolWireframe, VeltRecorderScreenToolWireframe, VeltRecorderAllToolWireframe, VeltRecorderAllToolMenuWireframe, VeltMediaSourceSettingsWireframe
Video player	VeltVideoPlayer, VeltCommentPlayerTimeline	(no dedicated root wireframe: props + CSS)
Video editor	VeltVideoEditor	VeltVideoEditorPlayerWireframe
Transcription / Subtitles	(no top-level Velt* primitive: rendered inside the recorder player)	VeltTranscriptionWireframe, VeltSubtitlesWireframe
Activity log	VeltActivityLog	VeltActivityLogWireframe
Autocomplete (@mentions)	VeltAutocomplete	VeltAutocompleteOptionWireframe, VeltAutocompleteGroupOptionWireframe, VeltAutocompleteEmptyWireframe, VeltAutocompleteChipTooltipWireframe
Arrows / Tags	VeltArrows / VeltTags (+ VeltArrowTool / VeltTagTool)	limited / no wireframe slots (CSS + props)
Areas	velt-areas / velt-area-tool (custom elements; no Velt* React wrapper)	none (CSS + props)