Skip to main content
Source of truth: exhaustive for what it covers. Generated from Velt component metadata. If a component or slot isn’t on this page, it doesn’t exist: don’t use it (a missing -wireframe tag renders nothing). Never invent or guess a name; use only identifiers that appear verbatim here or that you verified against ground truth and added here. Scope: exhaustive for the customization-surface components + slots of the in-scope features (comments, notifications, recorder, video, transcription, activity log, reactions, autocomplete, presence, cursors). Features with no customization surface (huddle, areas, arrows, tags, rewriter, selection, user-invite/request, view-analytics) are out of scope.
A flat list of every Velt component that has a customization surface: top-level components and every sub-component / wireframe slot, small to small: with a short definition of what each one does. Use it to look up what any customizable component is, or to figure out which component a design element corresponds to. (Features with no customization surface are out of scope here: see the next line.) Covers the features that have a customization surface (wireframe slots or composable primitives): comments, notifications, recorder, video player, transcription, activity log, reactions, autocomplete, presence, cursors. Features with neither (huddle, areas, arrows, tags, rewriter, selection, user-invite, user-request, view-analytics) are not listed. Names are the wireframe custom-element tags (e.g. velt-comment-dialog-header-wireframe); the React primitive (e.g. VeltCommentDialog) is noted in the definition for top-level components. Names follow the source-of-truth invariant.
Intent layer. Entries marked Intent · below carry a purpose / right-tool / wrong-tool note. They exist because the surface is commonly misapplied: applying the name literally produces a working-but-wrong UI. Read the Intent note before picking the component for a requirement: it tells you when to use a different mechanism instead. This follows the entry contract’s “right tool, not literal tool” rule.

​
Comment surfaces: anchored vs. statically-placed

Every comment surface is one of two kinds, and the kind decides the customization approach (per Decision tree and the entry contract’s Composition layer):
  • Anchored / Velt-positioned: Velt computes the surface’s on-page position (it tracks an anchor element, a pin coordinate, or the live page). Customize these with wireframes + CSS. Dropping to primitives or headless forfeits Velt’s positioning/anchoring: you would have to re-implement coordinate tracking, scroll-following, and z-index management yourself, which Velt does for free. Surfaces: the floating pin comment dialog (velt-comment-dialog-wireframe), comment pins (velt-comment-pin-wireframe), comment bubbles (velt-comment-bubble-wireframe), reaction pins, cursors (velt-cursor-pointer-wireframe), the minimap, and the floating multi-thread dialog (velt-multi-thread-comment-dialog-wireframe).
  • Statically-placed: you place the surface in your own layout (a panel, a column, an inline block); Velt does no positioning. There is no positioning penalty for primitives or headless here: reach for whichever rung the requirement needs. Surfaces: the sidebar (VeltCommentsSidebar / VeltCommentsSidebarV2), the inline comments section (velt-inline-comments-section-wireframe), and the notifications panel (velt-notifications-panel-wireframe).

​
Comments

  • velt-comment-bubble-wireframe: React: VeltCommentBubble. A floating bubble that summarizes the comments attached to an element, showing participant avatars and a count. Clicking it opens the underlying comment thread for that element.
  • velt-comment-bubble-avatar-wireframe: The avatar (or stack of avatars) of the people who have commented, shown inside the comment bubble. It gives the user a quick visual cue of who is involved in that thread.
  • velt-comment-bubble-comments-count-wireframe: A small numeric badge inside the bubble showing how many comments or replies exist on that element. It lets the user gauge thread activity without opening it.
  • velt-comment-bubble-unread-icon-wireframe: An indicator dot/icon on the bubble signalling that the thread has unread comments. It draws the user’s attention to threads that need their review.
  • velt-comment-composer-wireframe: React: VeltCommentComposer. The standalone input box where a user types a new comment or reply, including text entry, formatting, attachments, and mentions. It is the primary way users author comment content.
  • velt-comment-dialog-wireframe: React: VeltCommentDialog. The main popover/card that appears when a comment pin is opened, containing the full thread of comments plus header, body, composer, and action controls. It is where users read a conversation and reply, resolve, assign, or manage it. Intent · Purpose: render one thread in the anchored floating dialog Velt opens for a pin. Right tool when: a single pinned location maps to a single conversation (the standard comment-pin flow). Wrong tool when: one location must hold several distinct threads the user switches between (e.g. multiple comments dropped at the same spot, or a “comments at this cell” cluster) → use VeltMultiThreadCommentDialog (velt-multi-thread-comment-dialog-wireframe). This surface is anchored: keep it on wireframes+CSS to retain Velt’s pin positioning.
  • velt-comment-dialog-header-wireframe: The top bar of the comment dialog holding status, priority, navigation, options, and close controls. It gives the user thread-level context and the primary management actions.
  • velt-comment-dialog-body-wireframe: The scrollable middle region of the dialog that lists the comment thread cards. It is where the user reads the back-and-forth of the conversation.
  • velt-comment-dialog-threads-wireframe: The container that renders the ordered list of individual comment/reply cards within the dialog body. It assembles the full conversation for the user to scroll through.
  • velt-comment-dialog-close-button-wireframe: The X control in the dialog header that dismisses the open comment dialog. It lets the user close the thread and return to the document.
  • velt-comment-dialog-navigation-button-wireframe: A control (typically prev/next arrows) in the header to move between comment threads without closing the dialog. It lets users page through comments sequentially.
  • velt-comment-dialog-metadata-wireframe: A region showing thread metadata such as comment index, number, and category. It gives the user contextual labels about the thread’s position and type.
  • velt-comment-dialog-comment-index-wireframe: A label showing the thread’s position in the overall list (e.g. its ordinal index). It helps the user understand where this thread sits among all comments.
  • velt-comment-dialog-comment-number-wireframe: The assigned numeric identifier of the comment thread, matching the number shown on its pin. It lets the user cross-reference the dialog with the pin on the page.
  • velt-comment-dialog-comment-category-wireframe: A label showing the category/type tag assigned to the comment thread. It helps users classify and recognize the kind of comment.
  • velt-comment-dialog-all-comment-wireframe: A control/link that jumps the user to viewing all comments (e.g. the full list or sidebar). It provides a path from a single thread back to the complete set.
  • velt-comment-dialog-status-wireframe: The region displaying the current workflow status of the thread (e.g. Open, In Progress, Done). It tells the user the state of the conversation at a glance.
  • velt-comment-dialog-status-dropdown-wireframe: The dropdown control wrapping the status selector for the thread. It lets the user change the thread’s workflow status. Intent · Purpose: change a thread’s workflow status: its lifecycle state. The option set is customStatus (each { id, name, color, type: 'default' | 'ongoing' | 'terminal' }); type carries lifecycle semantics (default = open-like, ongoing = in-progress, terminal = resolved-like, which drives resolve behavior and pin styling). Right tool when: the values are mutually-exclusive states a thread moves through: Open / In Progress / Resolved, or domain lifecycles like Triage → Fixing → Verified. Wrong tool when: the values are arbitrary categories or labels (Bug / Feedback / Design, team names, tags). Those are not a lifecycle, they have no terminal semantics, and forcing them through status corrupts resolve/sort behavior. → For a fixed label set, use customCategory (rendered via the category dropdown / velt-comment-dialog-comment-category-wireframe). For free-form or app-defined values, store them in the thread context (set via setContextProvider) and render your own control. See customStatus / customCategory in Component config.
  • velt-comment-dialog-status-dropdown-trigger-wireframe: React: VeltCommentDialogStatusDropdownTriggerWireframe. The clickable trigger that opens the status dropdown. Activating it reveals the list of available statuses.
  • velt-comment-dialog-status-dropdown-trigger-icon-wireframe: The icon shown on the status dropdown trigger representing the current status. It gives a compact visual cue of the active state.
  • velt-comment-dialog-status-dropdown-trigger-name-wireframe: The text label on the status trigger naming the current status. It tells the user in words what state the thread is in.
  • velt-comment-dialog-status-dropdown-trigger-arrow-wireframe: The chevron arrow on the status trigger indicating it is expandable. It signals to the user that clicking opens a menu.
  • velt-comment-dialog-status-dropdown-content-wireframe: React: VeltCommentDialogStatusDropdownContentWireframe. The open menu panel listing all selectable statuses. It presents the user with the status options to choose from.
  • velt-comment-dialog-status-dropdown-content-item-wireframe: A single selectable status option row in the status menu. Clicking it sets the thread to that status.
  • velt-comment-dialog-status-dropdown-content-item-icon-wireframe: The icon for an individual status option in the menu. It visually identifies that particular status.
  • velt-comment-dialog-status-dropdown-content-item-name-wireframe: The text label for an individual status option in the menu. It names the status the user can select.
  • velt-comment-dialog-priority-wireframe: The region displaying the thread’s priority level (e.g. Low, Medium, High). It tells the user how urgent the comment is.
  • velt-comment-dialog-priority-dropdown-wireframe: The dropdown control wrapping the priority selector. It lets the user set or change the thread’s priority. Intent · Purpose: rank a thread’s urgency/importance (Low / Medium / High), an axis orthogonal to status. The option set is customPriority in Component config. Status vs. priority: status answers “where is this in its lifecycle?” (and one status is terminal/resolved); priority answers “how urgent is it?”: a thread carries both at once and they never substitute for each other. Use priority for severity/urgency ranking; use status for lifecycle state; use customCategory/context for everything else (see the status-dropdown Intent note above).
  • velt-comment-dialog-priority-dropdown-trigger-wireframe: React: VeltCommentDialogPriorityDropdownTriggerWireframe. The clickable trigger that opens the priority dropdown. Activating it reveals the priority options.
  • velt-comment-dialog-priority-dropdown-trigger-icon-wireframe: The icon on the priority trigger representing the current priority. It gives a quick visual cue of urgency.
  • velt-comment-dialog-priority-dropdown-trigger-name-wireframe: The text label on the priority trigger naming the current priority. It states the priority in words.
  • velt-comment-dialog-priority-dropdown-trigger-arrow-wireframe: The chevron arrow on the priority trigger indicating it is expandable. It signals the trigger opens a menu.
  • velt-comment-dialog-priority-dropdown-content-wireframe: React: VeltCommentDialogPriorityDropdownContentWireframe. The open menu panel listing all selectable priorities. It presents the priority options to the user.
  • velt-comment-dialog-priority-dropdown-content-item-wireframe: A single selectable priority option row in the menu. Clicking it assigns that priority to the thread.
  • velt-comment-dialog-priority-dropdown-content-item-icon-wireframe: The icon for an individual priority option in the menu. It visually identifies that priority level.
  • velt-comment-dialog-priority-dropdown-content-item-name-wireframe: The text label for an individual priority option in the menu. It names the priority the user can choose.
  • velt-comment-dialog-priority-dropdown-content-item-tick-wireframe: A checkmark shown next to the currently selected priority option. It confirms to the user which priority is active.
  • velt-comment-dialog-options-wireframe: The container for the thread-level overflow/options menu in the dialog. It groups secondary actions like edit, delete, assign, and notifications.
  • velt-comment-dialog-options-dropdown-wireframe: The dropdown control wrapping the thread options menu. It lets the user open the list of secondary thread actions.
  • velt-comment-dialog-options-dropdown-trigger-wireframe: React: VeltCommentDialogOptionsDropdownTriggerWireframe. The clickable trigger (often a three-dot icon) that opens the options menu. Activating it reveals the available actions.
  • velt-comment-dialog-options-dropdown-content-wireframe: React: VeltCommentDialogOptionsDropdownContentWireframe. The open menu panel listing all the secondary thread actions. It presents edit, delete, assign, privacy, and other options.
  • velt-comment-dialog-options-dropdown-content-edit-wireframe: The Edit action item in the options menu. Selecting it puts the comment into edit mode so the user can revise their text.
  • velt-comment-dialog-options-dropdown-content-delete-wireframe: The generic Delete action item in the options menu. Selecting it removes the comment or thread.
  • velt-comment-dialog-options-dropdown-content-delete-comment-wireframe: The Delete-comment action item that removes just the individual comment. It lets the user delete a single message within a thread.
  • velt-comment-dialog-options-dropdown-content-delete-thread-wireframe: The Delete-thread action item that removes the entire thread. It lets the user discard the whole conversation.
  • velt-comment-dialog-options-dropdown-content-assign-wireframe: The Assign action item in the options menu. Selecting it lets the user assign the thread to a person.
  • velt-comment-dialog-options-dropdown-content-make-private-wireframe: The Make-private action group in the options menu. It lets the user toggle the thread’s visibility between public and private.
  • velt-comment-dialog-options-dropdown-content-make-private-enable-wireframe: The action item that switches a thread to private. Selecting it restricts the thread to a limited audience.
  • velt-comment-dialog-options-dropdown-content-make-private-disable-wireframe: The action item that makes a private thread public again. Selecting it restores broad visibility.
  • velt-comment-dialog-options-dropdown-content-mark-as-read-wireframe: The Mark-as-read action group in the options menu. It lets the user toggle the thread’s read/unread state.
  • velt-comment-dialog-options-dropdown-content-mark-as-read-mark-read-wireframe: The action item that marks the thread as read. Selecting it clears the unread indicator for the user.
  • velt-comment-dialog-options-dropdown-content-mark-as-read-mark-unread-wireframe: The action item that marks the thread as unread. Selecting it flags the thread to revisit later.
  • velt-comment-dialog-options-dropdown-content-notification-wireframe: The notification subscription action group in the options menu. It lets the user control whether they get notified about the thread.
  • velt-comment-dialog-options-dropdown-content-notification-subscribe-wireframe: The Subscribe action item. Selecting it makes the user receive notifications for new activity on the thread.
  • velt-comment-dialog-options-dropdown-content-notification-unsubscribe-wireframe: The Unsubscribe action item. Selecting it stops notifications for the thread.
  • velt-comment-dialog-assign-menu-wireframe: The menu used to pick an assignee for the comment thread. It lets the user choose which collaborator owns the thread.
  • velt-comment-dialog-assignee-banner-wireframe: A banner shown when a thread is assigned, displaying who it is assigned to and resolve controls. It surfaces ownership and lets the assignee act on it.
  • velt-comment-dialog-assignee-banner-user-avatar-wireframe: The avatar of the assigned user shown in the assignee banner. It visually identifies who owns the thread.
  • velt-comment-dialog-assignee-banner-user-name-wireframe: The name of the assigned user shown in the assignee banner. It tells the user in words who the thread is assigned to.
  • velt-comment-dialog-assignee-banner-resolve-button-wireframe: The Resolve button in the assignee banner. It lets the assignee mark the assigned thread as resolved.
  • velt-comment-dialog-assignee-banner-unresolve-button-wireframe: The Unresolve button in the assignee banner. It lets the assignee reopen a previously resolved assigned thread.
  • velt-comment-dialog-resolve-button-wireframe: The general Resolve button on the dialog that marks the thread as resolved. It signals the conversation is complete.
  • velt-comment-dialog-unresolve-button-wireframe: The general Unresolve button that reopens a resolved thread. It lets the user reactivate the conversation.
  • velt-comment-dialog-approve-wireframe: The Approve control on the dialog used in approval workflows. It lets the user sign off on the commented item.
  • velt-comment-dialog-copy-link-wireframe: A control that copies a deep link to the comment thread. It lets the user share a direct pointer to this conversation.
  • velt-comment-dialog-delete-button-wireframe: A dedicated Delete button on the dialog for removing the comment or thread. It gives the user a direct delete affordance outside the options menu.
  • velt-comment-dialog-sign-in-wireframe: A prompt shown when the viewer is not signed in, inviting them to authenticate. It blocks commenting until the user logs in.
  • velt-comment-dialog-upgrade-wireframe: A prompt shown when a feature requires a plan upgrade. It nudges the user toward upgrading to unlock the capability.
  • velt-comment-dialog-ghost-banner-wireframe: A banner indicating the comment is a ghost comment (its anchor element is no longer present). It warns the user the comment lost its original location.
  • velt-comment-dialog-private-banner-wireframe: A banner indicating the thread is private. It reminds the user the conversation has restricted visibility.
  • velt-comment-dialog-toggle-reply-wireframe: A control that expands or collapses the replies in a thread. It lets the user show or hide the reply chain.
  • velt-comment-dialog-toggle-reply-icon-wireframe: The icon on the toggle-reply control. It visually indicates whether replies are expanded or collapsed.
  • velt-comment-dialog-toggle-reply-text-wireframe: The text label on the toggle-reply control. It describes the show/hide replies action in words.
  • velt-comment-dialog-toggle-reply-count-wireframe: The count of replies shown on the toggle-reply control. It tells the user how many replies are hidden or available.
  • velt-comment-dialog-hide-reply-wireframe: A control that collapses/hides the reply list in the thread. It lets the user tidy a long conversation.
  • velt-comment-dialog-more-reply-wireframe: A control to load or reveal additional replies that are not yet shown. It lets the user expand a truncated reply list.
  • velt-comment-dialog-more-reply-count-wireframe: The count of additional replies on the more-reply control. It shows how many more replies remain to view.
  • velt-comment-dialog-more-reply-text-wireframe: The text label on the more-reply control. It describes the load-more-replies action in words.
  • velt-comment-dialog-reply-avatars-wireframe: A compact stack of avatars representing the people who have replied in the thread. It gives a quick view of who participated.
  • velt-comment-dialog-reply-avatars-list-wireframe: The list container holding the individual reply-participant avatars. It arranges the avatar stack.
  • velt-comment-dialog-reply-avatars-list-item-wireframe: A single participant avatar within the reply avatars stack. It identifies one person who replied.
  • velt-comment-dialog-reply-avatars-remaining-count-wireframe: A “+N” badge showing how many additional participants are not displayed as avatars. It indicates extra people beyond the visible stack.
  • velt-comment-dialog-composer-wireframe: The composer area inside the dialog where the user writes a reply to the thread. It is the reply-input region of an open conversation.
  • velt-comment-dialog-composer-input-wireframe: The text input field of the dialog composer. It is where the user types their reply text.
  • velt-comment-dialog-composer-avatar-wireframe: The current user’s avatar shown beside the composer input. It indicates who is authoring the reply.
  • velt-comment-dialog-composer-action-button-wireframe: The primary send/submit button of the composer. Clicking it posts the typed reply to the thread.
  • velt-comment-dialog-composer-assign-user-wireframe: A control in the composer to assign the thread to a user as part of replying. It lets the user direct the comment to someone while posting.
  • velt-comment-dialog-composer-private-badge-wireframe: A badge in the composer indicating the reply will be private. It reminds the user about the visibility of what they are posting.
  • velt-comment-dialog-composer-recordings-wireframe: The area in the composer for attaching audio/video recordings. It lets the user add a recorded message to the reply.
  • velt-comment-dialog-composer-format-toolbar-wireframe: The rich-text formatting toolbar of the composer. It gives the user controls to style their comment text.
  • velt-comment-dialog-composer-format-toolbar-button-wireframe: An individual formatting button (e.g. bold, italic) in the composer toolbar. It applies that style to the selected text.
  • velt-comment-dialog-composer-attachments-wireframe: The container showing files/images attached to the in-progress comment. It lets the user review what they are attaching.
  • velt-comment-dialog-composer-attachments-selected-wireframe: The region listing the currently selected attachments before sending. It shows the user the staged files.
  • velt-comment-dialog-composer-attachments-image-wireframe: A single image attachment entry in the composer. It represents an image the user is attaching.
  • velt-comment-dialog-composer-attachments-image-preview-wireframe: The thumbnail preview of an attached image in the composer. It lets the user visually confirm the image.
  • velt-comment-dialog-composer-attachments-image-loading-wireframe: A loading indicator shown while an attached image uploads. It tells the user the upload is in progress.
  • velt-comment-dialog-composer-attachments-image-download-wireframe: A download control on an attached image in the composer. It lets the user save the image.
  • velt-comment-dialog-composer-attachments-image-delete-wireframe: A delete control on an attached image in the composer. It lets the user remove the image before sending.
  • velt-comment-dialog-composer-attachments-other-wireframe: A single non-image file attachment entry in the composer. It represents a document or other file being attached.
  • velt-comment-dialog-composer-attachments-other-icon-wireframe: The file-type icon for a non-image attachment in the composer. It visually indicates the kind of file.
  • velt-comment-dialog-composer-attachments-other-name-wireframe: The filename of a non-image attachment in the composer. It tells the user which file is attached.
  • velt-comment-dialog-composer-attachments-other-size-wireframe: The file size label of a non-image attachment in the composer. It informs the user how large the file is.
  • velt-comment-dialog-composer-attachments-other-loading-wireframe: A loading indicator while a non-image attachment uploads. It signals the upload is still processing.
  • velt-comment-dialog-composer-attachments-other-download-wireframe: A download control on a non-image attachment in the composer. It lets the user save the file.
  • velt-comment-dialog-composer-attachments-other-delete-wireframe: A delete control on a non-image attachment in the composer. It removes the file before sending.
  • velt-comment-dialog-composer-attachments-invalid-wireframe: The container listing attachments that failed validation (e.g. wrong type or too large). It surfaces problem files to the user.
  • velt-comment-dialog-composer-attachments-invalid-item-wireframe: A single invalid attachment entry in the composer. It represents one file that could not be attached.
  • velt-comment-dialog-composer-attachments-invalid-item-preview-wireframe: The preview/thumbnail of an invalid attachment. It shows the user which file was rejected.
  • velt-comment-dialog-composer-attachments-invalid-item-message-wireframe: The error message explaining why an attachment is invalid. It tells the user the reason for rejection.
  • velt-comment-dialog-composer-attachments-invalid-item-delete-wireframe: A delete control on an invalid attachment entry. It lets the user clear the rejected file.
  • velt-comment-dialog-thread-card-wireframe: A single message card within the thread, representing one comment or reply. It displays the author, text, time, and per-comment actions.
  • velt-comment-dialog-thread-card-avatar-wireframe: The author’s avatar on a thread card. It identifies who wrote that comment.
  • velt-comment-dialog-thread-card-name-wireframe: The author’s name on a thread card. It labels who wrote the comment.
  • velt-comment-dialog-thread-card-time-wireframe: The timestamp on a thread card showing when the comment was posted. It tells the user how recent the message is.
  • velt-comment-dialog-thread-card-device-type-wireframe: An indicator of the device the comment was made from. It gives the user context about the author’s environment.
  • velt-comment-dialog-thread-card-edited-wireframe: An “edited” label on a thread card. It indicates the comment was changed after posting.
  • velt-comment-dialog-thread-card-draft-wireframe: A draft indicator on a thread card. It shows the comment is an unsent draft.
  • velt-comment-dialog-thread-card-unread-wireframe: An unread indicator on a thread card. It flags that the user has not yet seen this comment.
  • velt-comment-dialog-thread-card-message-wireframe: The body text of the comment on a thread card. It is the actual message content the user reads.
  • velt-comment-dialog-thread-card-message-show-more-wireframe: A “show more” control on a long comment message. It expands truncated text so the user can read the full comment.
  • velt-comment-dialog-thread-card-message-show-less-wireframe: A “show less” control on an expanded comment message. It collapses the text back to a shorter form.
  • velt-comment-dialog-thread-card-options-wireframe: The per-comment options/overflow control on a thread card. It opens actions for that individual comment.
  • velt-comment-dialog-thread-card-reply-wireframe: The Reply control on a thread card. It lets the user respond directly to that comment.
  • velt-comment-dialog-thread-card-edit-composer-wireframe: The inline composer shown when editing a thread card’s comment. It lets the user revise the existing message text.
  • velt-comment-dialog-thread-card-reactions-wireframe: The reactions row on a thread card. It shows emoji reactions and lets the user add their own.
  • velt-comment-dialog-thread-card-reaction-pin-wireframe: A reaction pin element on a thread card. It represents a reaction anchored to the comment.
  • velt-comment-dialog-thread-card-reaction-tool-wireframe: The reaction picker tool on a thread card. It lets the user choose an emoji reaction to add.
  • velt-comment-dialog-thread-card-recordings-wireframe: The audio/video recordings attached to a comment, shown on its card. It lets the user play back a recorded message.
  • velt-comment-dialog-thread-card-attachments-wireframe: The container of attachments displayed on a posted comment card. It lets the user view files included in that comment.
  • velt-comment-dialog-thread-card-attachments-image-wireframe: A single image attachment shown on a posted comment card. It displays an attached image.
  • velt-comment-dialog-thread-card-attachments-image-preview-wireframe: The thumbnail preview of an image attachment on a posted card. It lets the user see the image inline.
  • velt-comment-dialog-thread-card-attachments-image-download-wireframe: A download control on an image attachment of a posted card. It lets the user save the image.
  • velt-comment-dialog-thread-card-attachments-image-delete-wireframe: A delete control on an image attachment of a posted card. It lets the user remove the image.
  • velt-comment-dialog-thread-card-attachments-other-wireframe: A single non-image file attachment shown on a posted comment card. It represents a document attached to that comment.
  • velt-comment-dialog-thread-card-attachments-other-icon-wireframe: The file-type icon for a non-image attachment on a posted card. It indicates the file kind.
  • velt-comment-dialog-thread-card-attachments-other-name-wireframe: The filename of a non-image attachment on a posted card. It names the attached file.
  • velt-comment-dialog-thread-card-attachments-other-size-wireframe: The size label of a non-image attachment on a posted card. It tells the user the file size.
  • velt-comment-dialog-thread-card-attachments-other-download-wireframe: A download control on a non-image attachment of a posted card. It lets the user save the file.
  • velt-comment-dialog-thread-card-attachments-other-delete-wireframe: A delete control on a non-image attachment of a posted card. It removes the file from the comment.
  • velt-comment-dialog-thread-card-assign-button-wireframe: An Assign button on a thread card. It lets the user assign the thread directly from that comment.
  • velt-comment-dialog-thread-card-seen-dropdown-wireframe: The dropdown showing who has seen the comment. It surfaces read receipts for the thread card.
  • velt-comment-dialog-thread-card-seen-dropdown-trigger-wireframe: The trigger that opens the seen-by dropdown on a thread card. Activating it reveals the list of viewers.
  • velt-comment-dialog-thread-card-seen-dropdown-content-wireframe: The open panel listing users who have seen the comment. It shows the user the read-receipt details.
  • velt-comment-dialog-thread-card-seen-dropdown-content-title-wireframe: The title/header of the seen-by dropdown panel. It labels the read-receipt list.
  • velt-comment-dialog-thread-card-seen-dropdown-content-items-wireframe: The list container of seen-by entries in the dropdown. It arranges the viewers.
  • velt-comment-dialog-thread-card-seen-dropdown-content-item-wireframe: A single seen-by entry in the dropdown. It represents one person who viewed the comment.
  • velt-comment-dialog-thread-card-seen-dropdown-content-item-avatar-wireframe: The avatar of a viewer in the seen-by list. It visually identifies who saw the comment.
  • velt-comment-dialog-thread-card-seen-dropdown-content-item-name-wireframe: The name of a viewer in the seen-by list. It labels who saw the comment.
  • velt-comment-dialog-thread-card-seen-dropdown-content-item-time-wireframe: The timestamp showing when a viewer saw the comment. It tells the user when each person read it.
  • velt-comment-dialog-comment-suggestion-status-wireframe: A status indicator for a comment that is a suggestion. It shows whether the suggestion is pending, accepted, or rejected.
  • velt-comment-dialog-suggestion-action-wireframe: The container of accept/reject controls for a suggestion comment. It groups the suggestion decision buttons.
  • velt-comment-dialog-suggestion-action-accept-wireframe: The Accept control for a suggestion comment. Selecting it applies the suggested change.
  • velt-comment-dialog-suggestion-action-reject-wireframe: The Reject control for a suggestion comment. Selecting it dismisses the suggested change.
  • velt-comment-dialog-agent-suggestion-wireframe: The container for an AI agent’s suggestion within the dialog. It presents an AI-generated suggestion the user can act on.
  • velt-comment-dialog-agent-suggestion-header-wireframe: The header of the agent suggestion block. It introduces the AI suggestion with identifying context.
  • velt-comment-dialog-agent-suggestion-body-wireframe: The body content of the agent suggestion. It shows the actual suggested text or change from the AI.
  • velt-comment-dialog-agent-suggestion-footer-wireframe: The footer of the agent suggestion block. It holds follow-up actions for the suggestion.
  • velt-comment-dialog-agent-suggestion-footer-open-comment-wireframe: A control in the agent suggestion footer to open the related comment. It lets the user jump to the full conversation.
  • velt-comment-dialog-agent-suggestion-timestamp-wireframe: The timestamp on the agent suggestion. It tells the user when the AI suggestion was made.
  • velt-comment-dialog-agent-suggestion-actions-wireframe: The container of accept/reject actions for the agent suggestion. It groups the decision controls.
  • velt-comment-dialog-agent-suggestion-action-accept-wireframe: The Accept control for the agent suggestion. Selecting it applies the AI’s suggested change.
  • velt-comment-dialog-agent-suggestion-action-reject-wireframe: The Reject control for the agent suggestion. Selecting it dismisses the AI’s suggestion.
  • velt-comment-dialog-agent-suggestion-agent-wireframe: The block identifying the AI agent that made the suggestion. It shows who/what generated the suggestion.
  • velt-comment-dialog-agent-suggestion-agent-avatar-wireframe: The avatar of the AI agent in the suggestion block. It visually represents the agent.
  • velt-comment-dialog-agent-suggestion-agent-name-wireframe: The name of the AI agent in the suggestion block. It labels which agent made the suggestion.
  • velt-comment-dialog-agent-suggestion-author-wireframe: The block identifying the human author associated with the agent suggestion. It shows who prompted or owns the suggestion.
  • velt-comment-dialog-agent-suggestion-author-avatar-wireframe: The avatar of the human author in the agent suggestion block. It visually identifies the person.
  • velt-comment-dialog-agent-suggestion-author-name-wireframe: The name of the human author in the agent suggestion block. It labels the associated person.
  • velt-comment-dialog-agent-suggestion-banner-wireframe: A banner summarizing the agent suggestion’s resolution state. It gives the user a high-level status of the AI suggestion.
  • velt-comment-dialog-agent-suggestion-banner-avatar-wireframe: The avatar shown in the agent suggestion banner. It visually identifies the relevant actor.
  • velt-comment-dialog-agent-suggestion-banner-avatar-user-image-wireframe: The user image portion of the banner avatar. It renders the person’s profile picture.
  • velt-comment-dialog-agent-suggestion-banner-avatar-status-icon-wireframe: A small status icon overlaid on the banner avatar. It conveys the suggestion’s state at a glance.
  • velt-comment-dialog-agent-suggestion-banner-label-wireframe: The descriptive label text in the agent suggestion banner. It states what happened with the suggestion.
  • velt-comment-dialog-agent-suggestion-banner-resolver-user-name-wireframe: The name of the user who resolved the agent suggestion, shown in the banner. It tells the user who acted on it.
  • velt-comment-dialog-agent-suggestion-banner-separator-wireframe: A visual separator within the agent suggestion banner. It divides banner sections for readability.
  • velt-comment-dialog-agent-suggestion-banner-timestamp-wireframe: The timestamp in the agent suggestion banner. It tells the user when the resolution occurred.
  • velt-comment-dialog-agent-suggestion-menu-wireframe: The overflow menu for the agent suggestion. It groups secondary actions for the AI suggestion.
  • velt-comment-dialog-agent-suggestion-menu-trigger-wireframe: The trigger that opens the agent suggestion menu. Activating it reveals the suggestion’s actions.
  • velt-comment-dialog-agent-suggestion-menu-content-wireframe: The open panel of the agent suggestion menu. It lists the available secondary actions.
  • velt-comment-dialog-agent-suggestion-menu-content-item-wireframe: A single action row in the agent suggestion menu. Selecting it performs that action.
  • velt-comment-dialog-agent-suggestion-menu-content-item-icon-wireframe: The icon for an action item in the agent suggestion menu. It visually identifies the action.
  • velt-comment-dialog-agent-suggestion-menu-content-item-label-wireframe: The text label for an action item in the agent suggestion menu. It names the action.
  • velt-comment-dialog-custom-annotation-dropdown-wireframe: A dropdown for selecting custom annotation tags on the comment. It lets the user categorize the comment with custom labels.
  • velt-comment-dialog-custom-annotation-dropdown-trigger-wireframe: The trigger that opens the custom annotation dropdown. Activating it reveals the annotation options.
  • velt-comment-dialog-custom-annotation-dropdown-trigger-placeholder-wireframe: The placeholder text on the annotation trigger when nothing is selected. It prompts the user to pick an annotation.
  • velt-comment-dialog-custom-annotation-dropdown-trigger-list-wireframe: The container of selected annotation chips on the trigger. It shows which annotations are currently applied.
  • velt-comment-dialog-custom-annotation-dropdown-trigger-list-item-wireframe: A single selected annotation chip on the trigger. It represents one applied annotation.
  • velt-comment-dialog-custom-annotation-dropdown-trigger-remaining-count-wireframe: A “+N” badge on the trigger for annotations beyond those shown. It indicates extra applied annotations.
  • velt-comment-dialog-custom-annotation-dropdown-trigger-arrow-wireframe: The chevron arrow on the annotation trigger. It signals the trigger opens a menu.
  • velt-comment-dialog-custom-annotation-dropdown-content-wireframe: The open menu of selectable custom annotations. It presents the annotation choices to the user.
  • velt-comment-dialog-custom-annotation-dropdown-content-item-wireframe: A single selectable annotation option in the menu. Clicking it applies that annotation.
  • velt-comment-dialog-custom-annotation-dropdown-content-item-icon-wireframe: The icon for an annotation option in the menu. It visually identifies the annotation.
  • velt-comment-dialog-custom-annotation-dropdown-content-item-label-wireframe: The text label for an annotation option in the menu. It names the annotation.
  • velt-comment-dialog-visibility-banner-wireframe: A banner showing the thread’s visibility scope (who can see it). It informs the user about the comment’s audience.
  • velt-comment-dialog-visibility-banner-icon-wireframe: The icon in the visibility banner representing the current scope. It gives a quick visual cue of visibility.
  • velt-comment-dialog-visibility-banner-text-wireframe: The text in the visibility banner describing the current scope. It states the audience in words.
  • velt-comment-dialog-visibility-banner-dropdown-wireframe: The dropdown used to change the thread’s visibility scope. It lets the user adjust who can see the thread.
  • velt-comment-dialog-visibility-banner-dropdown-trigger-wireframe: The trigger that opens the visibility dropdown. Activating it reveals the visibility options.
  • velt-comment-dialog-visibility-banner-dropdown-trigger-icon-wireframe: The icon on the visibility dropdown trigger. It indicates the current scope visually.
  • velt-comment-dialog-visibility-banner-dropdown-trigger-label-wireframe: The text label on the visibility dropdown trigger. It names the current visibility scope.
  • velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-wireframe: A list of avatars on the visibility trigger showing who has access. It visualizes the audience.
  • velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-item-wireframe: A single avatar in the visibility trigger’s audience list. It represents one person with access.
  • velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-remaining-count-wireframe: A “+N” badge for additional audience members not shown as avatars. It indicates extra people with access.
  • velt-comment-dialog-visibility-banner-dropdown-content-wireframe: The open panel of visibility options and audience pickers. It lets the user configure who can see the thread.
  • velt-comment-dialog-visibility-banner-dropdown-content-item-wireframe: A single visibility option row in the dropdown. Selecting it sets that visibility scope.
  • velt-comment-dialog-visibility-banner-dropdown-content-item-icon-wireframe: The icon for a visibility option in the dropdown. It visually identifies the scope.
  • velt-comment-dialog-visibility-banner-dropdown-content-item-label-wireframe: The text label for a visibility option in the dropdown. It names the scope.
  • velt-comment-dialog-visibility-banner-dropdown-content-org-picker-wireframe: A picker to choose which organization can see the thread. It lets the user scope visibility to an org.
  • velt-comment-dialog-visibility-banner-dropdown-content-user-picker-wireframe: A picker to choose which specific users can see the thread. It lets the user scope visibility to individuals.
  • velt-comment-pin-wireframe: React: VeltCommentPin. The marker placed on the page/canvas at the exact spot a comment was left. Clicking it opens the comment dialog for that location.
  • velt-comment-pin-index-wireframe: The index value rendered on a comment pin. It positions/orders the pin among others.
  • velt-comment-pin-number-wireframe: The number shown on a comment pin matching its thread number. It lets the user correlate the pin with the comment list.
  • velt-comment-pin-triangle-wireframe: The pointer/tail of the pin marker that points to the anchored spot. It visually ties the pin to its exact location.
  • velt-comment-pin-ghost-comment-indicator-wireframe: An indicator on a pin whose anchor element is missing (ghost). It warns the user the comment lost its target.
  • velt-comment-pin-private-comment-indicator-wireframe: An indicator on a pin marking the comment as private. It signals restricted visibility for that pin.
  • velt-comment-pin-unread-comment-indicator-wireframe: An indicator on a pin marking it as having unread content. It draws the user’s attention to new activity.
  • velt-comment-tool-wireframe: React: VeltCommentTool. A toggle button that activates comment mode so the user can click to drop a new comment pin. It is the entry point for adding comments to a page.
  • velt-comment-thread-wireframe: React: VeltCommentThread. A standalone rendering of a single comment thread outside the pin dialog (e.g. embedded in custom UI). It shows the conversation and composer for one thread. Intent · Deprecated. Do not use for new work: use VeltCommentDialog (velt-comment-dialog-wireframe) instead, which is the supported way to render a thread (anchored in a pin dialog) and to embed one in custom UI.
  • velt-comment-sidebar-panel-wireframe: The panel container for the comment sidebar variant. It holds the list of comment threads in a side panel.
  • velt-comment-sidebar-skeleton-wireframe: A loading skeleton for the comment sidebar panel. It shows placeholder content while threads load.
  • velt-text-comment-wireframe: React: VeltTextComment. Inline commenting anchored to a selected span of text. It lets the user highlight text and attach a comment to that selection.
  • velt-text-comment-tool-wireframe: React: VeltTextCommentTool. A tool/button to start a text-anchored comment on selected text. It is the entry point for inline text comments.
  • velt-text-comment-toolbar-wireframe: A floating toolbar shown on text selection offering comment-related actions. It lets the user act on the highlighted text.
  • velt-text-comment-toolbar-comment-annotation-wireframe: The Comment action in the text selection toolbar. It lets the user attach a comment to the selected text.
  • velt-text-comment-toolbar-copywriter-wireframe: The copywriter/AI-writing action in the text selection toolbar. It lets the user invoke writing assistance on the selection.
  • velt-text-comment-toolbar-generic-wireframe: A generic/configurable action slot in the text selection toolbar. It hosts a custom action for the selected text.
  • velt-text-comment-toolbar-divider-wireframe: A visual divider between groups of actions in the text comment toolbar. It separates action sets for readability.
  • velt-sidebar-button-wireframe: React: VeltSidebarButton. A button that toggles the comments sidebar open or closed. It is the user’s entry point to the side panel of comments.
  • velt-sidebar-button-icon-wireframe: The icon shown on the sidebar toggle button. It visually represents the comments sidebar.
  • velt-sidebar-button-comments-count-wireframe: A count badge on the sidebar button showing total comments. It tells the user how many comments exist.
  • velt-sidebar-button-unread-icon-wireframe: An unread indicator on the sidebar button. It signals there are unread comments to review.
  • velt-comments-sidebar-button-wireframe: React: VeltCommentsSidebarButton. The dedicated comments-sidebar toggle button (sidebar-scoped variant). It opens or closes the comments sidebar.
  • velt-comments-sidebar-button-icon-wireframe: The icon on the comments-sidebar button. It visually represents the sidebar.
  • velt-comments-sidebar-button-comments-count-wireframe: A count badge on the comments-sidebar button showing total comments. It tells the user the comment volume.
  • velt-comments-sidebar-button-unread-icon-wireframe: An unread indicator on the comments-sidebar button. It flags unread comments.
  • velt-comments-sidebar-panel-wireframe: React: VeltCommentsSidebar. The main sidebar panel that lists all comment threads for the document. It is where users browse, filter, and open comments in one place. Intent · This is V1. For new work prefer VeltCommentsSidebarV2 (velt-comments-sidebar-v2-wireframe): V2 is the newer layout with the richer, grouping-aware filter surface (velt-comments-sidebar-filter-container-v2-wireframe). Use V1 only to match an existing V1 integration. Statically-placed surface: you position it in your own layout, so primitives/headless are fine here with no positioning penalty.
  • velt-comments-sidebar-header-wireframe: The header bar of the comments sidebar holding title, filters, and actions. It gives the user controls over the comment list.
  • velt-comments-sidebar-list-wireframe: The scrollable list of comment thread items in the sidebar. It presents all threads for the user to browse.
  • velt-comments-sidebar-list-item-wireframe: A single comment thread row in the sidebar list. Clicking it focuses or opens that thread.
  • velt-comments-sidebar-list-item-dialog-container-wireframe: The container that hosts the expanded comment dialog for a list item. It lets the user view the full thread inline in the sidebar.
  • velt-comments-sidebar-list-item-group-wireframe: A grouping wrapper for related list items in the sidebar. It clusters threads under a shared heading.
  • velt-comments-sidebar-list-item-group-name-wireframe: The name/label of a list item group in the sidebar. It tells the user what the group represents.
  • velt-comments-sidebar-list-item-group-count-wireframe: The count of threads in a list item group. It shows how many comments fall in that group.
  • velt-comments-sidebar-list-item-group-arrow-wireframe: The expand/collapse arrow on a list item group. It lets the user fold or unfold the group.
  • velt-comments-sidebar-empty-placeholder-wireframe: The empty-state message shown when the sidebar has no comments. It tells the user there is nothing to display yet.
  • velt-comments-sidebar-skeleton-wireframe: A loading skeleton for the comments sidebar. It shows placeholders while threads load.
  • velt-comments-sidebar-close-button-wireframe: The close control of the comments sidebar. It lets the user dismiss the side panel.
  • velt-comments-sidebar-fullscreen-button-wireframe: A control to expand the sidebar to fullscreen. It gives the user a larger view of the comment list.
  • velt-comments-sidebar-action-button-wireframe: A generic action button in the sidebar header. It triggers a configured sidebar-level action.
  • velt-comments-sidebar-search-wireframe: The search input for filtering sidebar comments by text. It lets the user find specific comments quickly.
  • velt-comments-sidebar-focused-thread-wireframe: The focused single-thread view shown when a user drills into one thread in the sidebar. It displays the full conversation for that thread.
  • velt-comments-sidebar-focused-thread-back-button-wireframe: The back control to leave the focused thread view. It returns the user to the full sidebar list.
  • velt-comments-sidebar-focused-thread-dialog-container-wireframe: The container hosting the comment dialog within the focused thread view. It renders the conversation for the focused thread.
  • velt-comments-sidebar-page-mode-wireframe: The page-mode layout of the sidebar where comments are tied to the whole page rather than pinned spots. It shows page-level comments.
  • velt-comments-sidebar-page-mode-composer-wireframe: The composer in sidebar page mode for adding a page-level comment. It lets the user post a comment to the page.
  • velt-comments-sidebar-status-wireframe: The status-filter region in the sidebar. It lets the user narrow the list by thread status.
  • velt-comments-sidebar-status-dropdown-wireframe: React: VeltCommentsSidebarStatusDropdownWireframe. The status filter dropdown in the sidebar. It lets the user filter the comment list by status values.
  • velt-comments-sidebar-status-dropdown-trigger-wireframe: The trigger that opens the sidebar status filter dropdown. Activating it reveals the status options.
  • velt-comments-sidebar-status-dropdown-trigger-indicator-wireframe: An indicator on the status filter trigger showing an active filter. It tells the user a status filter is applied.
  • velt-comments-sidebar-status-dropdown-trigger-name-wireframe: The text label on the status filter trigger. It names the current status filter.
  • velt-comments-sidebar-status-dropdown-trigger-arrow-wireframe: The chevron arrow on the status filter trigger. It signals the trigger opens a menu.
  • velt-comments-sidebar-status-dropdown-content-wireframe: The open panel listing status filter options in the sidebar. It presents statuses the user can filter by.
  • velt-comments-sidebar-status-dropdown-content-item-wireframe: A single status filter option row in the sidebar dropdown. Selecting it filters by that status.
  • velt-comments-sidebar-status-dropdown-content-item-icon-wireframe: The icon for a status filter option. It visually identifies the status.
  • velt-comments-sidebar-status-dropdown-content-item-name-wireframe: The text label for a status filter option. It names the status.
  • velt-comments-sidebar-status-dropdown-content-item-count-wireframe: The count of threads matching a status filter option. It shows how many comments have that status.
  • velt-comments-sidebar-status-dropdown-content-item-checkbox-wireframe: The checkbox for selecting a status filter option. It toggles inclusion of that status.
  • velt-comments-sidebar-status-dropdown-content-item-checkbox-checked-wireframe: The checked state of a status filter checkbox. It shows the status is selected.
  • velt-comments-sidebar-status-dropdown-content-item-checkbox-unchecked-wireframe: The unchecked state of a status filter checkbox. It shows the status is not selected.
  • velt-comments-sidebar-filter-wireframe: The overall filter region of the sidebar. It groups all the controls for narrowing the comment list.
  • velt-comments-sidebar-filter-button-wireframe: The button that opens the sidebar filter controls. It lets the user start filtering the comment list. Intent · Purpose: open the full (V1) filter panel: the larger surface with attribute sections (people, assigned, category, priority, status, location, version…), grouping, and done/reset. Right tool when: the design has a real filter panel with several attribute controls. Wrong tool when: the design is just a compact filter/sort icon with presets → use MinimalFilterDropdown (velt-comments-sidebar-minimal-filter-dropdown-wireframe). For new builds the V2 equivalent is velt-comments-sidebar-filter-container-v2-wireframe.
  • velt-comments-sidebar-filter-title-wireframe: The title/heading of the filter panel. It labels the filtering section.
  • velt-comments-sidebar-filter-name-wireframe: The name label of a filter within the filter panel. It identifies which attribute is being filtered.
  • velt-comments-sidebar-filter-close-button-wireframe: The close control of the filter panel. It dismisses the filter controls.
  • velt-comments-sidebar-filter-done-button-wireframe: The Done button that confirms and applies the chosen filters. It finalizes the user’s filter selection.
  • velt-comments-sidebar-filter-reset-button-wireframe: The Reset button that clears all applied filters. It returns the list to showing everything.
  • velt-comments-sidebar-reset-filter-button-wireframe: A reset-filter control for clearing active filters in the sidebar. It restores the unfiltered comment list.
  • velt-comments-sidebar-filter-view-all-wireframe: A “view all” control that removes filtering to show every comment. It lets the user see the complete list.
  • velt-comments-sidebar-filter-group-by-wireframe: A control to group the comment list by an attribute. It organizes threads under headings the user chooses.
  • velt-comments-sidebar-filter-people-wireframe: A filter for narrowing comments by people involved. It lets the user see threads tied to specific users.
  • velt-comments-sidebar-filter-assigned-wireframe: A filter for comments assigned to a particular user. It lets the user see assigned threads.
  • velt-comments-sidebar-filter-involved-wireframe: A filter for comments the user is involved in. It surfaces threads relevant to the current user.
  • velt-comments-sidebar-filter-tagged-wireframe: A filter for comments where someone is tagged. It lets the user find threads with mentions.
  • velt-comments-sidebar-filter-category-wireframe: A filter by comment category. It narrows the list to a chosen category.
  • velt-comments-sidebar-filter-comment-type-wireframe: A filter by comment type. It narrows the list to a chosen comment type.
  • velt-comments-sidebar-filter-custom-wireframe: A filter by custom field/attribute. It lets the user filter on application-defined data.
  • velt-comments-sidebar-filter-document-wireframe: A filter by document. It limits comments to a specific document.
  • velt-comments-sidebar-filter-location-wireframe: A filter by location/sub-location within the document. It narrows comments to a specific area.
  • velt-comments-sidebar-filter-priority-wireframe: A filter by priority level. It limits the list to comments of a chosen priority.
  • velt-comments-sidebar-filter-status-wireframe: A filter by workflow status. It narrows the list to threads of a chosen status.
  • velt-comments-sidebar-filter-versions-wireframe: A filter by document version. It limits comments to a particular version.
  • velt-comments-sidebar-filter-item-wireframe: A single selectable filter option row. Selecting it toggles that filter value.
  • velt-comments-sidebar-filter-item-name-wireframe: The name label of a filter option row. It identifies the filter value.
  • velt-comments-sidebar-filter-item-count-wireframe: The count of comments matching a filter option. It shows the result size for that value.
  • velt-comments-sidebar-filter-item-checkbox-wireframe: The checkbox for a filter option row. It toggles whether that value is included.
  • velt-comments-sidebar-filter-item-checkbox-checked-wireframe: The checked state of a filter option checkbox. It shows the value is selected.
  • velt-comments-sidebar-filter-item-checkbox-unchecked-wireframe: The unchecked state of a filter option checkbox. It shows the value is deselected.
  • velt-comments-sidebar-filter-search-wireframe: A search input within the filter panel for finding filter values. It lets the user quickly locate a filter option.
  • velt-comments-sidebar-filter-search-input-wireframe: The text field of the filter search. It is where the user types to find filter values.
  • velt-comments-sidebar-filter-search-dropdown-icon-wireframe: The dropdown/search icon on the filter search. It indicates the searchable filter affordance.
  • velt-comments-sidebar-filter-search-hidden-count-wireframe: A count of filter results hidden beyond what is shown. It tells the user there are more matches.
  • velt-comments-sidebar-filter-search-tags-wireframe: The container of selected filter tags from search. It shows the active filter selections as chips.
  • velt-comments-sidebar-filter-search-tags-item-wireframe: A single selected filter tag chip. It represents one applied filter value.
  • velt-comments-sidebar-filter-search-tags-item-name-wireframe: The name on a filter tag chip. It labels the applied filter value.
  • velt-comments-sidebar-filter-search-tags-item-close-wireframe: The remove control on a filter tag chip. It lets the user clear that filter value.
  • velt-comments-sidebar-document-filter-dropdown-wireframe: The document-scoped filter dropdown in the sidebar. It lets the user filter comments by document.
  • velt-comments-sidebar-document-filter-dropdown-trigger-wireframe: The trigger that opens the document filter dropdown. Activating it reveals document options.
  • velt-comments-sidebar-document-filter-dropdown-trigger-label-wireframe: The label on the document filter trigger. It names the current document filter.
  • velt-comments-sidebar-document-filter-dropdown-content-wireframe: The open panel listing documents to filter by. It presents document choices to the user.
  • velt-comments-sidebar-location-filter-dropdown-wireframe: The location-scoped filter dropdown in the sidebar. It lets the user filter comments by location.
  • velt-comments-sidebar-location-filter-dropdown-trigger-wireframe: The trigger that opens the location filter dropdown. Activating it reveals location options.
  • velt-comments-sidebar-location-filter-dropdown-trigger-label-wireframe: The label on the location filter trigger. It names the current location filter.
  • velt-comments-sidebar-location-filter-dropdown-content-wireframe: The open panel listing locations to filter by. It presents location choices to the user.
  • velt-comments-sidebar-minimal-filter-dropdown-wireframe: A compact filter dropdown offering common preset filters and sorts. It gives users quick one-click filtering in minimal mode. Intent · Purpose: the small filter-icon menu with one-click presets: sort by date/unread, show All/Open/Resolved/Read/Unread, “Assigned to me”. Right tool when: the design shows a compact filter/sort icon that opens a short preset list. → reach for MinimalFilterDropdown. Wrong tool when: the design shows a full filter panel with multiple attribute sections (people, status, priority, category, location…) and apply/reset. That is not this; → use FilterButton + the filter panel (velt-comments-sidebar-filter-button-wireframe / velt-comments-sidebar-filter-wireframe in V1, or velt-comments-sidebar-filter-container-v2-wireframe in V2).
  • velt-comments-sidebar-minimal-filter-dropdown-trigger-wireframe: The trigger that opens the minimal filter dropdown. Activating it reveals the preset filters.
  • velt-comments-sidebar-minimal-filter-dropdown-content-wireframe: The open panel of preset filters and sorts in minimal mode. It presents the quick filter options.
  • velt-comments-sidebar-minimal-filter-dropdown-content-filter-all-wireframe: The “All” preset filter. Selecting it shows every comment.
  • velt-comments-sidebar-minimal-filter-dropdown-content-filter-open-wireframe: The “Open” preset filter. Selecting it shows only open threads.
  • velt-comments-sidebar-minimal-filter-dropdown-content-filter-resolved-wireframe: The “Resolved” preset filter. Selecting it shows only resolved threads.
  • velt-comments-sidebar-minimal-filter-dropdown-content-filter-read-wireframe: The “Read” preset filter. Selecting it shows only read threads.
  • velt-comments-sidebar-minimal-filter-dropdown-content-filter-unread-wireframe: The “Unread” preset filter. Selecting it shows only unread threads.
  • velt-comments-sidebar-minimal-filter-dropdown-content-filter-assigned-to-me-wireframe: The “Assigned to me” preset filter. Selecting it shows threads assigned to the current user.
  • velt-comments-sidebar-minimal-filter-dropdown-content-filter-reset-wireframe: The reset control in the minimal filter dropdown. It clears the preset filter selection.
  • velt-comments-sidebar-minimal-filter-dropdown-content-sort-date-wireframe: The “Sort by date” option in the minimal filter dropdown. It orders threads chronologically.
  • velt-comments-sidebar-minimal-filter-dropdown-content-sort-unread-wireframe: The “Sort by unread” option in the minimal filter dropdown. It orders threads by unread state.
  • velt-comments-sidebar-minimal-filter-dropdown-content-selected-icon-wireframe: A checkmark icon marking the currently selected preset filter/sort. It confirms the active choice.
  • velt-comments-sidebar-minimal-actions-dropdown-wireframe: A compact actions dropdown in minimal mode for bulk thread actions. It gives users quick list-level operations.
  • velt-comments-sidebar-minimal-actions-dropdown-trigger-wireframe: The trigger that opens the minimal actions dropdown. Activating it reveals the bulk actions.
  • velt-comments-sidebar-minimal-actions-dropdown-content-wireframe: The open panel of bulk actions in minimal mode. It presents the list-level operations.
  • velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-wireframe: The “Mark all as read” bulk action. Selecting it clears unread state across all threads.
  • velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-wireframe: The “Mark all as resolved” bulk action. Selecting it resolves all threads at once.
  • velt-comments-sidebar-v2-wireframe: React: VeltCommentsSidebarV2. The next-generation comments sidebar with an updated layout and grouping. It is the modern panel for browsing and managing all comments. Intent · Use this for new sidebars. V2 is the current, filter-capable sidebar (group-by + the sectioned velt-comments-sidebar-filter-container-v2-wireframe panel); prefer it over V1 (velt-comments-sidebar-panel-wireframe) unless an existing V1 integration must be matched. Statically-placed surface: no positioning penalty for primitives/headless.
  • velt-comments-sidebar-panel-v2-wireframe: The V2 sidebar panel container. It holds the V2 list of comment threads.
  • velt-comments-sidebar-header-v2-wireframe: The header bar of the V2 sidebar. It holds the V2 title, search, filters, and actions.
  • velt-comments-sidebar-list-v2-wireframe: The V2 scrollable list of comment threads. It presents threads in the updated layout.
  • velt-comments-sidebar-list-item-v2-wireframe: A single comment thread row in the V2 list. Clicking it focuses or opens that thread.
  • velt-comments-sidebar-list-group-header-v2-wireframe: A group header in the V2 list separating grouped threads. It labels a cluster of threads.
  • velt-comments-sidebar-list-group-header-v2-label-wireframe: The label text of a V2 list group header. It names the group.
  • velt-comments-sidebar-list-group-header-v2-count-wireframe: The count on a V2 list group header. It shows how many threads are in the group.
  • velt-comments-sidebar-list-group-header-v2-chevron-wireframe: The expand/collapse chevron on a V2 group header. It folds or unfolds the group.
  • velt-comments-sidebar-list-group-header-v2-separator-wireframe: A separator line in the V2 group header. It visually divides groups.
  • velt-comments-sidebar-empty-placeholder-v2-wireframe: The V2 empty-state message when there are no comments. It tells the user there is nothing to display.
  • velt-comments-sidebar-skeleton-v2-wireframe: A loading skeleton for the V2 sidebar. It shows placeholders while threads load.
  • velt-comments-sidebar-close-button-v2-wireframe: The close control of the V2 sidebar. It dismisses the V2 side panel.
  • velt-comments-sidebar-fullscreen-button-v2-wireframe: The V2 control to expand the sidebar to fullscreen. It gives the user a larger comment view.
  • velt-comments-sidebar-reset-filter-button-v2-wireframe: The V2 reset-filter control. It clears active filters in the V2 sidebar.
  • velt-comments-sidebar-search-v2-wireframe: The V2 search region in the sidebar header. It lets the user search comments.
  • velt-comments-sidebar-search-v2-input-wireframe: The text field of the V2 search. It is where the user types a search query.
  • velt-comments-sidebar-search-v2-icon-wireframe: The search icon in the V2 search region. It indicates the search affordance.
  • velt-comments-sidebar-page-mode-composer-v2-wireframe: The V2 page-mode composer for posting page-level comments. It lets the user add a comment to the page in V2.
  • velt-comments-sidebar-focused-thread-v2-wireframe: The V2 focused single-thread view. It shows the full conversation for one thread in the updated layout.
  • velt-comments-sidebar-focused-thread-back-button-v2-wireframe: The V2 back control to leave the focused thread view. It returns the user to the V2 list.
  • velt-comments-sidebar-focused-thread-dialog-container-v2-wireframe: The V2 container hosting the comment dialog in the focused thread view. It renders the focused conversation.
  • velt-comments-sidebar-filter-button-v2-wireframe: The V2 filter button that opens the filter controls. It lets the user start filtering in V2.
  • velt-comments-sidebar-filter-button-v2-applied-icon-wireframe: An indicator on the V2 filter button showing filters are applied. It tells the user filtering is active.
  • velt-comments-sidebar-filter-dropdown-v2-wireframe: The V2 filter dropdown for choosing filter values. It lets the user filter the V2 list.
  • velt-comments-sidebar-filter-dropdown-trigger-v2-wireframe: The trigger that opens the V2 filter dropdown. Activating it reveals the filter options.
  • velt-comments-sidebar-filter-dropdown-content-v2-wireframe: The open panel of the V2 filter dropdown. It presents the filter options.
  • velt-comments-sidebar-filter-dropdown-content-list-v2-wireframe: The list of filter options inside the V2 filter dropdown. It arranges the filter values.
  • velt-comments-sidebar-filter-dropdown-content-list-item-v2-wireframe: A single filter option row in the V2 filter dropdown. Selecting it toggles that filter.
  • velt-comments-sidebar-filter-dropdown-content-list-item-label-v2-wireframe: The label of a V2 filter option row. It names the filter value.
  • velt-comments-sidebar-filter-dropdown-content-list-item-count-v2-wireframe: The count on a V2 filter option row. It shows matching threads for that value.
  • velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2-wireframe: A selection indicator on a V2 filter option row. It shows whether the value is selected.
  • velt-comments-sidebar-filter-dropdown-content-list-category-v2-wireframe: A category grouping within the V2 filter dropdown list. It clusters related filter options.
  • velt-comments-sidebar-filter-dropdown-content-list-category-label-v2-wireframe: The label of a filter category in the V2 dropdown. It names the category.
  • velt-comments-sidebar-filter-dropdown-content-list-category-content-v2-wireframe: The content area of a filter category in the V2 dropdown. It holds the options under that category.
  • velt-comments-sidebar-filter-container-v2-wireframe: The full V2 filter container panel with sections and controls. It is the comprehensive filtering surface in V2. Intent · Purpose: the full filter panel for V2: sectioned, multi-attribute filtering with group-by and apply/reset. Right tool when: the design shows a complete filter panel in a V2 sidebar. Wrong tool when: the design is a compact filter-icon dropdown with presets → use MinimalFilterDropdown (velt-comments-sidebar-minimal-filter-dropdown-wireframe). This is the V2 counterpart of the V1 velt-comments-sidebar-filter-button-wireframe panel.
  • velt-comments-sidebar-filter-container-v2-title-wireframe: The title of the V2 filter container. It labels the filtering panel.
  • velt-comments-sidebar-filter-container-v2-close-button-wireframe: The close control of the V2 filter container. It dismisses the filter panel.
  • velt-comments-sidebar-filter-container-v2-reset-button-wireframe: The reset control of the V2 filter container. It clears all filter selections.
  • velt-comments-sidebar-filter-container-v2-apply-button-wireframe: The apply control of the V2 filter container. It commits the chosen filters to the list.
  • velt-comments-sidebar-filter-container-v2-group-by-wireframe: The group-by control in the V2 filter container. It organizes threads by a chosen attribute.
  • velt-comments-sidebar-filter-container-v2-section-wireframe: A single filter section in the V2 container. It groups the controls for one filterable attribute.
  • velt-comments-sidebar-filter-container-v2-section-label-wireframe: The label of a V2 filter section. It names the attribute being filtered.
  • velt-comments-sidebar-filter-container-v2-section-field-wireframe: The field/control area of a V2 filter section. It holds the input for that filter.
  • velt-comments-sidebar-filter-container-v2-section-list-wireframe: The list within a V2 filter section. It arranges the section’s selectable controls.
  • velt-comments-sidebar-filter-container-v2-section-control-wireframe: A control element within a V2 filter section. It lets the user set the section’s filter.
  • velt-comments-sidebar-filter-container-v2-section-control-value-wireframe: The displayed value of a V2 section control. It shows the current selection for that filter.
  • velt-comments-sidebar-filter-container-v2-section-control-chevron-wireframe: The chevron on a V2 section control. It indicates the control is expandable.
  • velt-comments-sidebar-filter-container-v2-section-control-search-wireframe: A search input within a V2 section control. It lets the user find values to filter on.
  • velt-comments-sidebar-filter-container-v2-section-control-chip-list-wireframe: The list of selected value chips on a V2 section control. It shows the active selections.
  • velt-comments-sidebar-filter-container-v2-section-control-chip-wireframe: A single selected value chip on a V2 section control. It represents one chosen filter value.
  • velt-comments-sidebar-filter-container-v2-section-option-wireframe: A selectable option within a V2 filter section. Selecting it includes that value in the filter.
  • velt-comments-sidebar-filter-container-v2-section-option-list-wireframe: The list of options in a V2 filter section. It arranges the selectable values.
  • velt-comments-sidebar-filter-container-v2-section-option-checkbox-wireframe: The checkbox on a V2 filter section option. It toggles inclusion of that value.
  • velt-comments-sidebar-filter-container-v2-section-option-name-wireframe: The name label of a V2 filter section option. It identifies the value.
  • velt-comments-sidebar-filter-container-v2-section-option-count-wireframe: The count on a V2 filter section option. It shows matching threads for that value.
  • velt-inline-comments-section-wireframe: React: VeltInlineCommentsSection. An embedded comments section that lives inline within page content (not a floating dialog). It shows a thread list and composer in place for a specific location. Intent · Purpose: an in-flow comments block you drop into your own layout for a specific location: no floating, no pin. Right tool when: the design embeds comments under/beside content (a record detail, a doc section). Wrong tool when: comments must float and follow a pinned spot on the page → that is the anchored dialog (velt-comment-dialog-wireframe). Statically-placed surface: primitives/headless are fine here with no positioning penalty.
  • velt-inline-comments-section-panel-wireframe: The panel container of the inline comments section. It holds the inline thread list and controls.
  • velt-inline-comments-section-list-wireframe: The list of comment threads in the inline section. It presents the threads for that inline location.
  • velt-inline-comments-section-skeleton-wireframe: A loading skeleton for the inline comments section. It shows placeholders while threads load.
  • velt-inline-comments-section-comment-count-wireframe: A count of comments in the inline section. It tells the user how many comments are present.
  • velt-inline-comments-section-composer-container-wireframe: The composer area of the inline section. It lets the user add a new comment inline.
  • velt-inline-comments-section-filter-dropdown-wireframe: The filter dropdown for the inline comments section. It lets the user narrow the inline thread list.
  • velt-inline-comments-section-filter-dropdown-trigger-wireframe: The trigger that opens the inline filter dropdown. Activating it reveals filter options.
  • velt-inline-comments-section-filter-dropdown-trigger-name-wireframe: The label on the inline filter trigger. It names the current filter.
  • velt-inline-comments-section-filter-dropdown-trigger-arrow-wireframe: The chevron arrow on the inline filter trigger. It signals the trigger opens a menu.
  • velt-inline-comments-section-filter-dropdown-content-wireframe: The open panel of the inline filter dropdown. It presents the filter options.
  • velt-inline-comments-section-filter-dropdown-content-list-wireframe: The list of filter options in the inline filter dropdown. It arranges the options.
  • velt-inline-comments-section-filter-dropdown-content-list-item-wireframe: A single filter option row in the inline filter dropdown. Selecting it toggles that filter.
  • velt-inline-comments-section-filter-dropdown-content-list-item-label-wireframe: The label of an inline filter option row. It names the filter value.
  • velt-inline-comments-section-filter-dropdown-content-list-item-checkbox-wireframe: The checkbox on an inline filter option row. It toggles inclusion of that value.
  • velt-inline-comments-section-filter-dropdown-content-apply-button-wireframe: The apply button in the inline filter dropdown. It commits the chosen filters to the list.
  • velt-inline-comments-section-sorting-dropdown-wireframe: The sorting dropdown for the inline comments section. It lets the user reorder the thread list.
  • velt-inline-comments-section-sorting-dropdown-trigger-wireframe: The trigger that opens the inline sorting dropdown. Activating it reveals sort options.
  • velt-inline-comments-section-sorting-dropdown-trigger-icon-wireframe: The icon on the inline sorting trigger. It visually represents the sort control.
  • velt-inline-comments-section-sorting-dropdown-trigger-name-wireframe: The label on the inline sorting trigger. It names the current sort order.
  • velt-inline-comments-section-sorting-dropdown-content-wireframe: The open panel of the inline sorting dropdown. It presents the sort options.
  • velt-inline-comments-section-sorting-dropdown-content-item-wireframe: A single sort option row in the inline sorting dropdown. Selecting it applies that sort order.
  • velt-inline-comments-section-sorting-dropdown-content-item-icon-wireframe: The icon for a sort option row. It visually identifies the sort.
  • velt-inline-comments-section-sorting-dropdown-content-item-name-wireframe: The label for a sort option row. It names the sort order.
  • velt-inline-comments-section-sorting-dropdown-content-item-tick-wireframe: A checkmark on the currently selected sort option. It confirms the active sort.
  • velt-multi-thread-comment-dialog-wireframe: React: VeltMultiThreadCommentDialog. A dialog that displays multiple comment threads together in one popover (e.g. all comments at a shared location). It lets the user browse and manage several threads at once. Intent · Purpose: show many threads at one anchored location, with its own list, filter, and new-thread affordances. Right tool when: a single point/region accumulates multiple independent conversations (clustered pins, “all comments on this row/cell”). Wrong tool when: the location holds exactly one conversation → use VeltCommentDialog (velt-comment-dialog-wireframe); and when you want a persistent, list-of-all-threads browsing surface placed in your own layout rather than anchored to a spot → use the sidebar (VeltCommentsSidebarV2). Anchored surface: customize with wireframes+CSS.
  • velt-multi-thread-comment-dialog-panel-wireframe: The panel container of the multi-thread dialog. It holds the multiple-thread list and controls.
  • velt-multi-thread-comment-dialog-list-wireframe: The list of threads in the multi-thread dialog. It presents all threads at that location.
  • velt-multi-thread-comment-dialog-comment-count-wireframe: A count of threads/comments in the multi-thread dialog. It tells the user how many are present.
  • velt-multi-thread-comment-dialog-composer-container-wireframe: The composer area of the multi-thread dialog. It lets the user add a new thread or comment.
  • velt-multi-thread-comment-dialog-new-thread-button-wireframe: The button to start a new thread within the multi-thread dialog. It lets the user open a fresh conversation.
  • velt-multi-thread-comment-dialog-empty-placeholder-wireframe: The empty-state message when the multi-thread dialog has no threads. It tells the user there is nothing yet.
  • velt-multi-thread-comment-dialog-close-button-wireframe: The close control of the multi-thread dialog. It dismisses the dialog.
  • velt-multi-thread-comment-dialog-reset-filter-button-wireframe: A reset-filter control in the multi-thread dialog. It clears active filters on the thread list.
  • velt-multi-thread-comment-dialog-minimal-filter-dropdown-wireframe: A compact filter dropdown in the multi-thread dialog. It lets the user quickly filter the thread list.
  • velt-multi-thread-comment-dialog-minimal-filter-dropdown-trigger-wireframe: The trigger that opens the multi-thread minimal filter dropdown. Activating it reveals preset filters.
  • velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-wireframe: The open panel of preset filters in the multi-thread dialog. It presents the quick filter options.
  • velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-all-wireframe: The “All” preset filter in the multi-thread dialog. Selecting it shows every thread.
  • velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-resolved-wireframe: The “Resolved” preset filter in the multi-thread dialog. Selecting it shows resolved threads.
  • velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-read-wireframe: The “Read” preset filter in the multi-thread dialog. Selecting it shows read threads.
  • velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-unread-wireframe: The “Unread” preset filter in the multi-thread dialog. Selecting it shows unread threads.
  • velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-date-wireframe: The “Sort by date” option in the multi-thread dialog. It orders threads chronologically.
  • velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-unread-wireframe: The “Sort by unread” option in the multi-thread dialog. It orders threads by unread state.
  • velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-selected-icon-wireframe: A checkmark marking the selected preset filter/sort in the multi-thread dialog. It confirms the active choice.
  • velt-multi-thread-comment-dialog-minimal-actions-dropdown-wireframe: A compact bulk-actions dropdown in the multi-thread dialog. It gives users quick list-level operations.
  • velt-multi-thread-comment-dialog-minimal-actions-dropdown-trigger-wireframe: The trigger that opens the multi-thread actions dropdown. Activating it reveals the bulk actions.
  • velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-wireframe: The open panel of bulk actions in the multi-thread dialog. It presents the list-level operations.
  • velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-read-wireframe: The “Mark all as read” action in the multi-thread dialog. It clears unread state across all threads.
  • velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-resolved-wireframe: The “Mark all as resolved” action in the multi-thread dialog. It resolves all threads at once.
  • velt-persistent-comment-mode-wireframe: React: VeltPersistentCommentModeWireframe. A persistent banner/bar indicating comment mode is active and staying on. It lets the user keep adding multiple comments without re-toggling the tool.
  • velt-persistent-comment-mode-close-button-wireframe: The close control on the persistent comment mode bar. It lets the user exit persistent commenting.
  • velt-persistent-comment-mode-label-wireframe: The label on the persistent comment mode bar. It tells the user that comment mode is currently active.
  • velt-persistent-comment-mode-label-public-wireframe: The label variant indicating persistent comment mode is posting public comments. It reminds the user comments will be visible to everyone.
  • velt-persistent-comment-mode-label-private-wireframe: The label variant indicating persistent comment mode is posting private comments. It reminds the user comments will be restricted.
  • velt-confirm-dialog-wireframe: React: VeltConfirmDialogWireframe. A confirmation dialog shown before destructive or important comment actions (e.g. deleting a thread). It asks the user to approve or cancel the action.
  • velt-confirm-dialog-title-wireframe: The title of the confirmation dialog. It states what the user is being asked to confirm.
  • velt-confirm-dialog-message-wireframe: The message body of the confirmation dialog. It explains the consequences of the action.
  • velt-confirm-dialog-approve-button-wireframe: The approve/confirm button of the confirmation dialog. Clicking it proceeds with the action.
  • velt-confirm-dialog-reject-button-wireframe: The reject/cancel button of the confirmation dialog. Clicking it aborts the action.

​
Comment surfaces: text / canvas / chart primitives

These are additional anchored comment surfaces (Velt computes their on-page position from the anchor: a text span, a canvas coordinate, or a chart data point). Customize with wireframes + CSS; dropping to primitives/headless forfeits Velt’s positioning.
  • velt-comment-text: React: VeltCommentText (props annotationId, multiThreadAnnotationId). An anchored inline text-comment thread surface: it renders the comment text/thread bound to a given annotation inline in your content. Distinct from VeltTextComment (the velt-text-comment tool that starts a text-anchored comment on a selection): VeltCommentText renders an existing thread’s text for an annotation, while VeltTextComment is the entry-point tool. Don’t conflate the two.
  • velt-canvas-comment: React: VeltCanvasComment (required canvasId, required position). A comment anchored at a specific coordinate on an HTML <canvas>. Use it to pin comments onto canvas-rendered content where there’s no DOM element to target.
  • velt-chart-comment: React: VeltChartComment (props commentMetadata, dialogMetadataTemplate, ghostComment). A comment anchored to a chart data point. commentMetadata is stored on comments placed on the chart; dialogMetadataTemplate chooses which fields surface in the dialog header; ghostComment keeps showing comments whose data point is gone.
  • VeltHighChartComments: React integration helper (no own custom tag; props id (required), chartComputedData (required), dialogMetadataTemplate, Highcharts). Maps Highcharts points to VeltChartComment instances so comments anchor to the right point.
  • VeltNivoChartComments: React integration helper (no own custom tag; props id (required), chartComputedData, dialogMetadataTemplate). The same for Nivo charts; comments are filtered to the chart via annotation.metadata.id === id.

​
Comment dialog: config sub-components (standalone)

Standalone, composable parts of the comment dialog: each renders a real velt-comment-dialog-* live element and is an anchored part of the dialog (it inherits the dialog’s Velt-computed position). All accept annotationId (the annotation context) plus the common defaultCondition / inlineCommentSectionMode. Use them to compose a custom dialog layout from the individual controls.
  • velt-comment-dialog-assign-dropdown: React: VeltCommentDialogAssignDropdown (props assignTo, selectedUserContacts, onSetAssignTo). A standalone assignee dropdown: pick who owns the thread. Distinct from the options-menu assign item (velt-comment-dialog-options-dropdown-content-assign-wireframe) and the assign menu (velt-comment-dialog-assign-menu-wireframe): this is the self-contained dropdown control you can place anywhere in a custom dialog.
  • velt-comment-dialog-attachment-button: React: VeltCommentDialogAttachmentButton (props allowedFileTypes, onSelectFiles, onClicked). The standalone attach-files control for the dialog composer.
  • velt-comment-dialog-context-wrapper: React: VeltCommentDialogContextWrapper (prop annotationId). A wrapper that injects the annotation context into nested dialog primitives so they resolve against the right thread. Wrap custom dialog sub-components in it when they need annotation context.
  • velt-comment-dialog-device-type-icons: React: VeltCommentDialogDeviceTypeIcons (prop deviceType). The device-type icon indicating where a comment was authored (desktop/mobile/…).
  • velt-comment-dialog-private-button: React: VeltCommentDialogPrivateButton. Toggles a comment’s private state (a standalone make-private/make-public control).
  • velt-comment-dialog-visibility-dropdown: React: VeltCommentDialogVisibilityDropdown (also accepts disabled). A standalone public/private visibility dropdown. This is the non-banner visibility-dropdown family: the guide elsewhere documents the visibility-banner-dropdown variant (velt-comment-dialog-visibility-banner-dropdown-*); this is a separate, self-contained dropdown you place directly. Its parts:
    • velt-comment-dialog-visibility-dropdown-content: React: VeltCommentDialogVisibilityDropdownContent. The open menu panel of visibility options.
    • velt-comment-dialog-visibility-dropdown-content-private: React: VeltCommentDialogVisibilityDropdownContentPrivate. The “private” option in the menu.
    • velt-comment-dialog-visibility-dropdown-content-public: React: VeltCommentDialogVisibilityDropdownContentPublic. The “public” option in the menu.
    • velt-comment-dialog-visibility-dropdown-trigger: React: VeltCommentDialogVisibilityDropdownTrigger. The control that opens the dropdown.
    • velt-comment-dialog-visibility-dropdown-trigger-icon: React: VeltCommentDialogVisibilityDropdownTriggerIcon. The icon on the trigger showing the current scope.
    • velt-comment-dialog-visibility-dropdown-trigger-label: React: VeltCommentDialogVisibilityDropdownTriggerLabel. The text label on the trigger naming the current scope.

​
User selector dropdown (wireframe family)

A wireframe-only family (pure velt-*-wireframe slots: there is no separate live config element) that templates one selectable user row in a user/assignee-selection dropdown: it lays out the candidate’s avatar, name, email, and an error indicator. It is the per-option row template the assignee picker renders for each collaborator. Anchored: it renders inside the Velt-positioned dropdown popover, so it inherits that surface’s computed position; keep it on wireframes+CSS rather than placing it statically. Distinct from the comment-dialog assign controls (velt-comment-dialog-assign-dropdown / velt-comment-dialog-assign-menu-wireframe): those are the assignee picker control/menu bound to a thread’s assignTo, whereas this family is the reusable user-row template (avatar/name/email/error) the selection surface fills per candidate. None of these slots take input props beyond the common veltIf / veltClass / variant.
  • velt-user-selector-dropdown-wireframe: React: VeltUserSelectorDropdownWireframe. The root of one user-selection row; parent that exposes the slots below as static dotted accessors.
    • velt-user-selector-dropdown-avatar-wireframe: React: VeltUserSelectorDropdownWireframe.Avatar. The candidate user’s avatar.
    • velt-user-selector-dropdown-name-wireframe: React: VeltUserSelectorDropdownWireframe.Name. The candidate user’s display name.
    • velt-user-selector-dropdown-email-wireframe: React: VeltUserSelectorDropdownWireframe.Email. The candidate user’s email.
    • velt-user-selector-dropdown-error-icon-wireframe: React: VeltUserSelectorDropdownWireframe.ErrorIcon. An error indicator shown on the row (e.g. when the user cannot be resolved/selected).

​
Notifications

  • velt-notifications-tool-wireframe: Root slot of the VeltNotificationsTool React primitive: the bell/trigger button that toggles the notifications panel open or closed. It wraps the icon, label, and unread badges, and emits the onNotificationClick event.
  • velt-notifications-tool-icon-wireframe: The default (no-unread) bell icon shown inside the notifications tool trigger when there are no unread notifications.
  • velt-notifications-tool-unread-icon-wireframe: The alternate bell icon shown inside the tool trigger when unread notifications exist, signaling pending activity.
  • velt-notifications-tool-unread-count-wireframe: The numeric badge rendered on the tool trigger displaying the count of unread notifications.
  • velt-notifications-tool-label-wireframe: The optional text label rendered next to the tool icon (e.g. “Notifications”) inside the trigger button.
  • velt-notifications-panel-wireframe: Root slot of the VeltNotificationsPanel React primitive: the full notifications panel container holding the header, tabs, content lists, and settings. It can open as a popover or a sidebar.
  • velt-notifications-panel-skeleton-wireframe: The loading-state placeholder shown inside the panel while notifications are being fetched, before real content renders.
  • velt-notifications-panel-title-wireframe: The title row at the top of the panel, containing the title text and header-level controls.
  • velt-notifications-panel-title-text-wireframe: The text element within the panel title row, typically reading “Notifications”.
  • velt-notifications-panel-close-button-wireframe: The button in the panel header that dismisses and closes the notifications panel.
  • velt-notifications-panel-read-all-button-wireframe: The button that marks every notification in the panel as read in a single action.
  • velt-notifications-panel-settings-button-wireframe: The button that switches the panel from the notifications list view into the settings view.
  • velt-notifications-panel-view-all-button-wireframe: The button that navigates to the full notifications history / view-all listing.
  • velt-notifications-panel-header-wireframe: The header bar of the panel that holds the tab navigation row (For You, Documents, People, All).
  • velt-notifications-panel-header-tab-for-you-wireframe: The “For You” tab in the header that filters the list to notifications relevant to the current user.
  • velt-notifications-panel-header-tab-documents-wireframe: The “Documents” tab in the header that switches the content to a per-document grouping of notifications.
  • velt-notifications-panel-header-tab-people-wireframe: The “People” tab in the header that switches the content to a per-person grouping of notifications.
  • velt-notifications-panel-header-tab-all-wireframe: The “All” tab in the header that shows the complete, unfiltered list of notifications.
  • velt-notifications-panel-content-wireframe: The main content region of the panel that swaps between the For You, Documents, People, and All views based on the active tab.
  • velt-notifications-panel-content-for-you-wireframe: The content view rendered when the “For You” tab is active, showing the personalized notification list.
  • velt-notifications-panel-content-all-wireframe: The content view rendered when the “All” tab is active, showing every notification.
  • velt-notifications-panel-content-all-read-container-wireframe: The container within the All view that holds the already-read notifications, visually separating them from unread ones.
  • velt-notifications-panel-content-all-list-wireframe: The list element within the All view that renders the collection of notification list items.
  • velt-notifications-panel-content-all-list-item-wireframe: A single notification row within the All view list.
  • velt-notifications-panel-content-all-list-item-content-wireframe: The content block of an All-view list item, holding its label and body details.
  • velt-notifications-panel-content-all-list-item-label-wireframe: The label/text element inside an All-view list item describing the notification or its group.
  • velt-notifications-panel-content-list-wireframe: The generic notification list element used to render the rows of individual notifications (shared by the For You view).
  • velt-notifications-panel-content-list-item-wireframe: A single generic notification row, the repeating unit of the notification list.
  • velt-notifications-panel-content-list-item-avatar-wireframe: The avatar slot of a notification row showing the profile image of the actor who triggered the notification.
  • velt-notifications-panel-content-list-item-headline-wireframe: The headline text of a notification row summarizing what happened (e.g. who did what).
  • velt-notifications-panel-content-list-item-body-wireframe: The body text of a notification row containing the detailed message or comment preview content.
  • velt-notifications-panel-content-list-item-file-name-wireframe: The element in a notification row displaying the name of the document or file the notification relates to.
  • velt-notifications-panel-content-list-item-time-wireframe: The timestamp element of a notification row showing when the notification occurred (e.g. relative time).
  • velt-notifications-panel-content-list-item-unread-wireframe: The unread indicator dot/marker on a notification row signaling that it has not yet been read.
  • velt-notifications-panel-content-documents-wireframe: The content view rendered when the “Documents” tab is active, grouping notifications by document.
  • velt-notifications-panel-content-documents-list-wireframe: The list element within the Documents view that renders one row per document.
  • velt-notifications-panel-content-documents-list-item-wireframe: A single document row in the Documents view representing one document and its notification summary.
  • velt-notifications-panel-content-documents-list-item-content-wireframe: The content block of a document row, holding the document name and counts.
  • velt-notifications-panel-content-documents-list-item-name-wireframe: The element showing the document’s name within a Documents-view row.
  • velt-notifications-panel-content-documents-list-item-count-wireframe: The element showing the total notification count for that document in a Documents-view row.
  • velt-notifications-panel-content-documents-list-item-unread-wireframe: The unread indicator/count for a document row, showing how many of its notifications are unread.
  • velt-notifications-panel-content-people-wireframe: The content view rendered when the “People” tab is active, grouping notifications by the person who triggered them.
  • velt-notifications-panel-content-people-list-wireframe: The list element within the People view that renders one row per person.
  • velt-notifications-panel-content-people-list-item-wireframe: A single person row in the People view representing one actor and their notification summary.
  • velt-notifications-panel-content-people-list-item-avatar-wireframe: The avatar slot of a People-view row showing that person’s profile image.
  • velt-notifications-panel-content-people-list-item-content-wireframe: The content block of a People-view row, holding the person’s name and count.
  • velt-notifications-panel-content-people-list-item-name-wireframe: The element showing the person’s name within a People-view row.
  • velt-notifications-panel-content-people-list-item-count-wireframe: The element showing the count of notifications from that person in a People-view row.
  • velt-notifications-panel-content-load-more-wireframe: The load-more control at the bottom of a content list that fetches the next page of notifications (paginated by pageSize).
  • velt-notifications-panel-settings-wireframe: The settings view of the panel, shown after the settings button is pressed, where notification preferences are configured. It is off by default and enabled via the settings prop.
  • velt-notifications-panel-settings-header-wireframe: The header region of the settings view, containing the back button and title.
  • velt-notifications-panel-settings-header-title-wireframe: The title text element within the settings view header (e.g. “Settings”).
  • velt-notifications-panel-settings-back-button-wireframe: The button in the settings header that returns from the settings view back to the notifications list.
  • velt-notifications-panel-settings-title-wireframe: The section title within the settings body labeling the group of preference controls.
  • velt-notifications-panel-settings-description-wireframe: The descriptive helper text in the settings body explaining the notification preference options.
  • velt-notifications-panel-settings-list-wireframe: The list container in the settings view that holds the configurable settings rows and accordions.
  • velt-notifications-panel-settings-accordion-wireframe: A collapsible accordion group within the settings list grouping a category of preference options.
  • velt-notifications-panel-settings-accordion-trigger-wireframe: The clickable header of a settings accordion that expands or collapses its content.
  • velt-notifications-panel-settings-accordion-trigger-icon-wireframe: The icon shown in a settings accordion trigger (e.g. category icon or chevron).
  • velt-notifications-panel-settings-accordion-trigger-label-wireframe: The label text of a settings accordion trigger naming the preference category.
  • velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe: The element on a settings accordion trigger showing the currently selected value/option for that category.
  • velt-notifications-panel-settings-accordion-content-wireframe: The expandable body of a settings accordion that reveals the selectable option items.
  • velt-notifications-panel-settings-accordion-content-item-wireframe: A single selectable option row inside an expanded settings accordion.
  • velt-notifications-panel-settings-accordion-content-item-icon-wireframe: The icon for an individual option item within a settings accordion’s content.
  • velt-notifications-panel-settings-accordion-content-item-label-wireframe: The label text for an individual option item within a settings accordion’s content.
  • velt-notifications-panel-settings-mute-all-title-wireframe: The title of the “mute all” preference row in settings, labeling the toggle that silences all notifications.
  • velt-notifications-panel-settings-mute-all-description-wireframe: The description text for the “mute all” preference row explaining what muting all notifications does.
  • velt-notifications-panel-settings-mute-all-toggle-wireframe: The toggle switch in settings that enables or disables muting of all notifications.
  • velt-notifications-panel-settings-footer-wireframe: The footer region of the settings view, holding any closing actions or footer controls.
  • VeltNotificationsHistoryPanel: React primitive rendering a full-page or embedded view of the complete notification history (beyond the popover feed), e.g. a dedicated notifications route. It has no velt-...-wireframe slot tags and is customized only via props (embedMode, onNotificationClick, darkMode); opened programmatically via toggleHistoryPanel().

​
Recorder

  • VeltRecorderTool: React primitive (<velt-recorder-tool>) that renders a single trigger button to start a recording of a given type (video, audio, or screen). Accepts a buttonLabel, panelId, variant, recordingCountdown, pictureInPicture, and maxLength. It is the entry point a user clicks to begin capturing media.
  • VeltRecorderControlPanel: React primitive (<velt-recorder-control-panel>) that renders the in-progress recording UI: live timer, waveform/preview, pause/stop controls, and post-recording editing/playback. Emits an onRecordedData event with the captured RecordedData when done. Supports mode (layout), countdown, transcription, video editor, and picture-in-picture options.
  • VeltRecorderPlayer: React primitive (<velt-recorder-player>) that plays back an already-recorded clip referenced by recorderId. Provides playback transport, optional summary/transcription, fullscreen, delete (via onDelete), and copy-link actions. Used to embed a finished recording inline.
  • VeltRecorderNotes: React primitive (<velt-recorder-notes>) that wraps recorder children and adds recording-notes context (countdown, transcription, video editor settings). It is a container that propagates shared recording configuration to nested recorder UI.
  • velt-recorder-all-tool-wireframe: The combined “all tools” trigger that lets the user pick any recording type from one button. It opens the all-tool menu listing the available capture modes.
  • velt-recorder-all-tool-menu-wireframe: The dropdown menu shown by the all-tool button. It contains the per-mode entries (audio, video, screen) the user can choose from.
  • velt-recorder-all-tool-menu-audio-wireframe: The audio entry inside the all-tool menu. Clicking it starts an audio-only recording.
  • velt-recorder-all-tool-menu-video-wireframe: The video entry inside the all-tool menu. Clicking it starts a webcam/video recording.
  • velt-recorder-all-tool-menu-screen-wireframe: The screen entry inside the all-tool menu. Clicking it starts a screen-capture recording.
  • velt-recorder-audio-tool-wireframe: The standalone audio recorder trigger button. It begins an audio-only recording when clicked.
  • velt-recorder-video-tool-wireframe: The standalone video recorder trigger button. It begins a webcam/video recording when clicked.
  • velt-recorder-screen-tool-wireframe: The standalone screen recorder trigger button. It begins a screen-capture recording when clicked.
  • velt-recorder-control-panel-loading-wireframe: The loading state of the control panel shown while the recorder initializes (permissions, devices, stream setup). It is a placeholder before the live recording UI appears.
  • velt-recorder-control-panel-action-bar-wireframe: The action bar container holding the live recording controls (time, waveform, pause/play, stop, clear, pip). It is the main toolbar during recording.
  • velt-recorder-control-panel-action-bar-type-icon-wireframe: The icon in the action bar indicating the current recording type (audio/video/screen). It gives a visual cue of what is being captured.
  • velt-recorder-control-panel-action-bar-time-wireframe: The elapsed-time readout in the action bar. It counts up the duration of the active recording.
  • velt-recorder-control-panel-action-bar-waveform-wireframe: The live audio waveform visualization in the action bar. It animates with the captured audio signal.
  • velt-recorder-control-panel-action-bar-toggle-wireframe: The pause/resume toggle control container in the action bar. It switches the recording between paused and active.
  • velt-recorder-control-panel-action-bar-toggle-pause-wireframe: The pause icon/state of the action-bar toggle, shown while recording is active. Clicking it pauses the recording.
  • velt-recorder-control-panel-action-bar-toggle-play-wireframe: The resume icon/state of the action-bar toggle, shown while recording is paused. Clicking it resumes the recording.
  • velt-recorder-control-panel-action-bar-stop-wireframe: The stop button in the action bar. Clicking it ends the recording and produces the captured clip.
  • velt-recorder-control-panel-action-bar-clear-wireframe: The clear/discard button in the action bar. Clicking it cancels and removes the current recording.
  • velt-recorder-control-panel-action-bar-pip-wireframe: The picture-in-picture button in the action bar. It pops the recording preview into a floating PiP window.
  • velt-recorder-control-panel-paused-wireframe: The paused state view of the control panel. It is shown when the user has paused an in-progress recording.
  • velt-recorder-control-panel-collapsed-button-wireframe: The collapsed/minimized control-panel button. It is the compact toggle that expands or collapses the recording panel.
  • velt-recorder-control-panel-collapsed-button-on-wireframe: The “on” (active/recording) state of the collapsed control-panel button. It indicates a recording is in progress while collapsed.
  • velt-recorder-control-panel-collapsed-button-off-wireframe: The “off” (idle) state of the collapsed control-panel button. It indicates no active recording while collapsed.
  • velt-recorder-control-panel-floating-mode-wireframe: The floating-mode layout of the control panel, rendered as a detached movable widget. It is used when the panel floats over the page rather than docked.
  • velt-recorder-control-panel-floating-mode-container-wireframe: The container wrapper for the floating-mode control panel. It positions and holds the floating widget’s contents.
  • velt-recorder-control-panel-floating-mode-waveform-wireframe: The audio waveform shown inside the floating-mode control panel. It visualizes the live audio while floating.
  • velt-recorder-control-panel-thread-mode-wireframe: The thread-mode layout of the control panel, used when recording from within a comment thread. It adapts the panel to the threaded comment context.
  • velt-recorder-control-panel-video-wireframe: The video preview region of the control panel for video recordings. It shows the live webcam feed being captured.
  • velt-recorder-control-panel-screen-wireframe: The screen preview region of the control panel for screen recordings. It shows the live screen capture feed.
  • velt-recorder-control-panel-screen-mini-container-wireframe: The small/mini container holding the screen preview within the control panel. It is the compact preview frame for screen capture.
  • velt-recorder-player-wireframe: The base recorder player surface that plays a finished recording. It hosts the preview, transport controls, and action buttons.
  • velt-recorder-player-video-wireframe: The video element of the player for video/screen recordings. It renders the recorded video frames.
  • velt-recorder-player-video-container-wireframe: The container wrapping the player’s video element. It frames and sizes the video preview area.
  • velt-recorder-player-play-button-wireframe: The primary play button on the player preview. Clicking it starts playback of the recording.
  • velt-recorder-player-avatar-wireframe: The avatar of the user who created the recording, shown on the player. It identifies the recording’s author.
  • velt-recorder-player-name-wireframe: The name label of the recording’s author or title on the player. It provides textual attribution/identification.
  • velt-recorder-player-time-wireframe: The duration/time readout shown on the player preview. It displays the recording’s length or current position.
  • velt-recorder-player-timeline-wireframe: The playback timeline/scrubber of the player. It shows progress and lets the user navigate the recording.
  • velt-recorder-player-timeline-seek-bar-wireframe: The draggable seek bar within the player timeline. The user drags it to scrub to a position in the recording.
  • velt-recorder-player-copy-link-wireframe: The copy-link button on the player. Clicking it copies a shareable link to the recording.
  • velt-recorder-player-delete-wireframe: The delete button on the player. Clicking it removes the recording (firing the onDelete event).
  • velt-recorder-player-edit-button-wireframe: The edit button on the player. Clicking it opens the recording in the video editor.
  • velt-recorder-player-full-screen-button-wireframe: The fullscreen toggle on the player. Clicking it expands the recording playback to fullscreen.
  • velt-recorder-player-subtitles-wireframe: The subtitles display layer of the player. It overlays caption text on the recording during playback.
  • velt-recorder-player-subtitles-button-wireframe: The subtitles toggle button on the player. Clicking it shows or hides the subtitle overlay.
  • velt-recorder-player-transcription-wireframe: The transcription panel of the player. It shows the full text transcript of the recording’s audio.
  • velt-recorder-player-audio-wireframe: The audio-recording variant of the player. It renders the compact audio playback UI instead of a video frame.
  • velt-recorder-player-audio-container-wireframe: The container wrapping the audio player’s contents. It groups the audio toggle and waveform.
  • velt-recorder-player-audio-toggle-wireframe: The play/pause toggle control of the audio player. It switches audio playback between playing and paused.
  • velt-recorder-player-audio-toggle-play-wireframe: The play icon/state of the audio player’s toggle, shown while paused. Clicking it starts audio playback.
  • velt-recorder-player-audio-toggle-pause-wireframe: The pause icon/state of the audio player’s toggle, shown while playing. Clicking it pauses audio playback.
  • velt-recorder-player-audio-waveform-wireframe: The waveform visualization of the audio player. It depicts the recorded audio amplitude over time.
  • velt-recorder-player-expanded-wireframe: The expanded/full player view shown when the recording is opened large. It hosts the enlarged display, expanded controls, and panels.
  • velt-recorder-player-expanded-panel-wireframe: The panel container of the expanded player. It frames the expanded playback experience.
  • velt-recorder-player-expanded-display-wireframe: The main media display area of the expanded player. It renders the enlarged video/screen playback.
  • velt-recorder-player-expanded-minimize-button-wireframe: The minimize button in the expanded player. Clicking it collapses the player back to its compact size.
  • velt-recorder-player-expanded-copy-link-wireframe: The copy-link button in the expanded player. Clicking it copies a shareable link to the recording.
  • velt-recorder-player-expanded-subtitles-wireframe: The subtitle overlay shown in the expanded player. It displays captions over the enlarged playback.
  • velt-recorder-player-expanded-transcription-wireframe: The transcription panel in the expanded player. It shows the recording’s full text transcript alongside the enlarged view.
  • velt-recorder-player-expanded-controls-wireframe: The control bar of the expanded player holding all playback controls. It is the expanded-view transport toolbar.
  • velt-recorder-player-expanded-controls-toggle-button-wireframe: The play/pause toggle button in the expanded controls. It switches expanded playback between playing and paused.
  • velt-recorder-player-expanded-controls-toggle-play-wireframe: The play icon/state of the expanded controls toggle, shown while paused. Clicking it starts playback.
  • velt-recorder-player-expanded-controls-toggle-pause-wireframe: The pause icon/state of the expanded controls toggle, shown while playing. Clicking it pauses playback.
  • velt-recorder-player-expanded-controls-current-time-wireframe: The current playback position readout in the expanded controls. It shows how far into the recording playback has reached.
  • velt-recorder-player-expanded-controls-total-time-wireframe: The total-duration readout in the expanded controls. It shows the full length of the recording.
  • velt-recorder-player-expanded-controls-time-wireframe: The combined time display in the expanded controls. It groups current and total time readouts.
  • velt-recorder-player-expanded-controls-progress-bar-wireframe: The playback progress/scrub bar in the expanded controls. The user drags it to seek within the recording.
  • velt-recorder-player-expanded-controls-volume-button-wireframe: The volume/mute button in the expanded controls. Clicking it adjusts or mutes playback audio.
  • velt-recorder-player-expanded-controls-settings-button-wireframe: The settings button in the expanded controls. It opens playback settings (e.g. quality/speed).
  • velt-recorder-player-expanded-controls-delete-button-wireframe: The delete button in the expanded controls. Clicking it removes the recording.
  • velt-recorder-player-expanded-controls-subtitle-button-wireframe: The subtitles toggle button in the expanded controls. It shows or hides the subtitle overlay.
  • velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe: The icon inside the expanded-controls subtitle button. It visually represents the subtitles toggle.
  • velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe: The tooltip shown on hovering the expanded-controls subtitle button. It labels the subtitle toggle action.
  • velt-recorder-player-expanded-controls-transcription-button-wireframe: The transcription toggle button in the expanded controls. It shows or hides the transcript panel.
  • velt-recorder-player-expanded-controls-transcription-icon-wireframe: The icon inside the expanded-controls transcription button. It visually represents the transcription toggle.
  • velt-recorder-player-expanded-controls-transcription-tooltip-wireframe: The tooltip shown on hovering the expanded-controls transcription button. It labels the transcription toggle action.
  • velt-media-source-settings-wireframe: The media-source settings panel that lets the user choose input devices before/during recording. It contains the audio and video device selectors.
  • velt-media-source-settings-toggle-wireframe: The toggle control that opens or closes the media-source settings panel. It expands/collapses the device picker.
  • velt-media-source-settings-toggle-icon-wireframe: The icon shown inside the media-source settings toggle. It indicates the toggle’s current open/closed state.
  • velt-media-source-settings-toggle-icon-open-wireframe: The “open” state icon of the settings toggle, shown when the panel is expanded. It cues that settings are visible.
  • velt-media-source-settings-toggle-icon-close-wireframe: The “close” state icon of the settings toggle, shown when the panel is collapsed. It cues that settings are hidden.
  • velt-media-source-settings-audio-wireframe: The audio input section of the media-source settings. It lets the user select the microphone device.
  • velt-media-source-settings-video-wireframe: The video input section of the media-source settings. It lets the user select the camera device.
  • velt-media-source-settings-divider-wireframe: The visual divider separating sections within the media-source settings panel. It is a layout separator between audio and video groups.
  • velt-media-source-settings-options-wireframe: The list of device options inside a media-source settings section. It holds the selectable input-device items.
  • velt-media-source-settings-options-item-icon-wireframe: The icon of an individual device option item. It visually represents that device type.
  • velt-media-source-settings-options-item-label-wireframe: The label text of an individual device option item. It names the selectable input device.
  • velt-media-source-settings-selected-label-wireframe: The label showing the currently selected input device. It reflects the active device choice in the settings.
  • velt-recording-preview-steps-dialog-wireframe: The pre-recording preview/setup dialog shown before capture starts. It walks the user through camera/mic checks and starting the recording.
  • velt-recording-preview-steps-dialog-close-button-wireframe: The close button of the preview-steps dialog. Clicking it dismisses the setup dialog without recording.
  • velt-recording-preview-steps-dialog-video-wireframe: The video section of the preview-steps dialog. It hosts the webcam preview during setup.
  • velt-recording-preview-steps-dialog-video-player-wireframe: The video player element inside the preview-steps dialog. It renders the live camera feed for the user to check framing.
  • velt-recording-preview-steps-dialog-screen-player-wireframe: The screen preview player inside the preview-steps dialog. It shows the live screen-capture feed for the user to confirm before recording.
  • velt-recording-preview-steps-dialog-audio-wireframe: The audio section of the preview-steps dialog. It hosts the microphone preview/level during setup.
  • velt-recording-preview-steps-dialog-waveform-wireframe: The audio waveform/level meter in the preview-steps dialog. It shows live mic input so the user can verify audio.
  • velt-recording-preview-steps-dialog-settings-wireframe: The settings section of the preview-steps dialog. It exposes device and recording options before starting.
  • velt-recording-preview-steps-dialog-settings-panel-wireframe: The settings panel container within the preview-steps dialog. It holds the device-selection and option controls.
  • velt-recording-preview-steps-dialog-camera-button-wireframe: The camera enable/disable toggle button in the preview-steps dialog. It turns the webcam on or off for the recording.
  • velt-recording-preview-steps-dialog-camera-button-on-wireframe: The “on” state of the dialog camera button, shown when the camera is enabled. Clicking it disables the camera.
  • velt-recording-preview-steps-dialog-camera-button-off-wireframe: The “off” state of the dialog camera button, shown when the camera is disabled. Clicking it enables the camera.
  • velt-recording-preview-steps-dialog-camera-off-message-wireframe: The message shown in the preview dialog when the camera is turned off. It informs the user that no video will be captured.
  • velt-recording-preview-steps-dialog-mic-button-wireframe: The microphone enable/disable toggle button in the preview-steps dialog. It turns the mic on or off for the recording.
  • velt-recording-preview-steps-dialog-mic-button-on-wireframe: The “on” state of the dialog mic button, shown when the microphone is enabled. Clicking it disables the mic.
  • velt-recording-preview-steps-dialog-mic-button-off-wireframe: The “off” state of the dialog mic button, shown when the microphone is disabled. Clicking it enables the mic.
  • velt-recording-preview-steps-dialog-button-panel-wireframe: The button panel of the preview-steps dialog grouping the camera/mic toggles and start action. It is the dialog’s main control row.
  • velt-recording-preview-steps-dialog-start-recording-wireframe: The start-recording button in the preview-steps dialog. Clicking it begins capture (optionally after a countdown).
  • velt-recording-preview-steps-dialog-bottom-panel-wireframe: The bottom panel of the preview-steps dialog. It holds the countdown and bottom-row controls.
  • velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe: The icon shown in the dialog’s bottom panel. It accompanies the bottom-panel status/action.
  • velt-recording-preview-steps-dialog-bottom-panel-countdown-wireframe: The countdown indicator in the dialog’s bottom panel. It counts down before recording begins.
  • velt-recording-preview-steps-dialog-bottom-panel-close-wireframe: The close control in the dialog’s bottom panel. Clicking it dismisses the bottom panel/dialog.
  • velt-recording-preview-steps-dialog-timer-wireframe: The pre-recording timer/countdown element of the preview-steps dialog. It shows the lead-in countdown before capture starts.
  • velt-recording-preview-steps-dialog-timer-countdown-wireframe: The numeric countdown displayed within the dialog timer. It ticks down the seconds before recording begins.
  • velt-recording-preview-steps-dialog-timer-cancel-wireframe: The cancel control for the dialog countdown timer. Clicking it aborts the countdown before recording starts.

​
Video Player

  • VeltVideoPlayer (React primitive): Top-level video player rendering the velt-video-player web element from a required src. Wraps an HTML5 <video> with a custom auto-hiding control bar plus time-anchored comment and reaction pins on the seek bar. Optional props: darkMode, sync, commentTool, shadowDom.
  • VeltVideoEditor (React primitive): Top-level video editor rendering the velt-video-editor web element, providing the trim/split/zoom editing surface for a clip. Accepts a recorded blob, url, annotationId, recorderId, variant, and darkMode. Used to edit a recording before it is applied or downloaded.
  • VeltCommentPlayerTimeline (React primitive): Top-level marker strip rendering the velt-comment-player-timeline web element that overlays comment and reaction pins along a media duration. Accepts totalMediaLength, offset, videoPlayerId, and shadowDom, and emits onCommentClick / onReactionClick. Lets viewers see and jump to time-coded comments on the scrubber.
  • velt-video-editor-player-wireframe: Root container slot for the entire video editor player UI, holding every editor sub-slot as children. It is the customization entry point for the editor layout.
  • velt-video-editor-player-title-wireframe: Displays the title/name of the clip being edited at the top of the editor.
  • velt-video-editor-player-preview-wireframe: Container slot that frames the live video preview area of the editor.
  • velt-video-editor-player-preview-video-wireframe: The <video> element slot inside the preview that plays the clip being edited.
  • velt-video-editor-player-preview-loading-wireframe: Loading-state placeholder shown inside the preview while the editor video is being prepared or processed.
  • velt-video-editor-player-toggle-button-wireframe: Play/pause toggle control for the editor preview playback.
  • velt-video-editor-player-time-wireframe: Wrapper slot grouping the current-time and total-time displays together.
  • velt-video-editor-player-current-time-wireframe: Shows the current playback position (elapsed time) of the editor preview.
  • velt-video-editor-player-total-time-wireframe: Shows the total duration of the clip in the editor.
  • velt-video-editor-player-apply-button-wireframe: Button that applies/confirms the current edits (trims, splits, zooms) to the clip.
  • velt-video-editor-player-apply-button-loading-wireframe: Loading state of the Apply button shown while edits are being processed or rendered.
  • velt-video-editor-player-close-button-wireframe: Button that closes/dismisses the video editor without applying.
  • velt-video-editor-player-download-button-wireframe: Button that downloads the edited clip to the user’s device.
  • velt-video-editor-player-retake-button-wireframe: Button that discards the current clip and restarts the recording/capture flow.
  • velt-video-editor-player-split-button-wireframe: Button that splits the clip at the current playhead position into separate segments.
  • velt-video-editor-player-delete-button-wireframe: Button that deletes the currently selected segment or zoom region from the timeline.
  • velt-video-editor-player-add-zoom-button-wireframe: Button that adds a zoom region/effect at the current playhead position on the timeline.
  • velt-video-editor-player-zoom-button-wireframe: Container slot for the zoom control, wrapping its trigger and options dropdown.
  • velt-video-editor-player-zoom-button-trigger-wireframe: Clickable trigger that opens the zoom level options menu.
  • velt-video-editor-player-zoom-button-options-wireframe: Container slot for the popover/dropdown holding the zoom options list and input.
  • velt-video-editor-player-zoom-button-options-list-wireframe: List slot enumerating the available preset zoom level options.
  • velt-video-editor-player-zoom-button-options-list-item-wireframe: A single selectable zoom level option within the options list.
  • velt-video-editor-player-zoom-button-options-input-wireframe: Input field for entering a custom zoom level value.
  • velt-video-editor-player-timeline-wireframe: Root slot for the editor timeline, the horizontal track where segments, scale, playhead, and markers are arranged.
  • velt-video-editor-player-timeline-container-wireframe: Inner container slot that holds the scrollable/scalable timeline track contents.
  • velt-video-editor-player-timeline-scale-wireframe: The time ruler/scale slot showing tick marks and time labels along the timeline.
  • velt-video-editor-player-timeline-trim-wireframe: Trim handles slot used to set the start/end crop points of a clip segment on the timeline.
  • velt-video-editor-player-timeline-marker-wireframe: A marker placed on the timeline indicating a point of interest such as a split, zoom, or annotation.
  • velt-video-editor-player-timeline-playhead-wireframe: Container slot for the playhead indicator that tracks the current playback position on the timeline.
  • velt-video-editor-player-timeline-playhead-line-wireframe: The vertical line element of the playhead spanning the timeline tracks.
  • velt-video-editor-player-timeline-playhead-actions-wireframe: Action controls attached to the playhead (e.g. split/zoom shortcuts) for the current position.
  • velt-video-editor-player-timeline-backspace-hint-wireframe: Inline hint prompting the user that Backspace deletes the selected timeline segment/region.
  • velt-video-editor-player-timeline-onboarding-wireframe: Root slot for the first-run onboarding overlay teaching users how to use the editor timeline.
  • velt-video-editor-player-timeline-onboarding-content-wireframe: Content container slot within the timeline onboarding overlay.
  • velt-video-editor-player-timeline-onboarding-text-wireframe: Wrapper slot grouping the onboarding title and description text.
  • velt-video-editor-player-timeline-onboarding-text-title-wireframe: Title/heading text of the timeline onboarding message.
  • velt-video-editor-player-timeline-onboarding-text-description-wireframe: Descriptive body text of the timeline onboarding message.
  • velt-video-editor-player-timeline-onboarding-arrow-wireframe: Pointer arrow in the onboarding overlay directing attention to the relevant timeline control.
  • velt-subtitles-button-wireframe: Toggle button that turns subtitles/captions on or off on the player.
  • velt-subtitles-close-button-wireframe: Button that closes/dismisses the subtitles panel or overlay.
  • velt-subtitles-panel-wireframe: Container panel slot that houses the subtitles list/transcript content.
  • velt-subtitles-text-wireframe: Slot rendering an individual line/segment of subtitle text.
  • velt-subtitles-tooltip-wireframe: Tooltip slot shown for the subtitles control (e.g. on hover of the subtitles button).
  • velt-subtitles-embed-mode-wireframe: Embedded subtitles layout slot that renders captions inline within the player chrome.
  • velt-subtitles-floating-mode-wireframe: Floating subtitles layout slot that overlays captions on top of the video as a detached element.

​
Transcription

  • VeltTranscriptionWireframe: Top-level React primitive (React.FC) and logical container for the transcription feature; renders only its children with no DOM tag of its own. Exposes .EmbedMode and .FloatingMode as the two presentation-mode subcomponents through which the panel is reached.
  • velt-transcription-floating-mode-wireframe: Default presentation mode (React VeltTranscriptionWireframe.FloatingMode); shows a small trigger button on the player that opens the transcript panel in a floating CDK overlay. Maps to mode === 'floating'. Composes Button, Tooltip, PanelContainer, and Panel.
  • velt-transcription-embed-mode-wireframe: Inline presentation mode (React VeltTranscriptionWireframe.EmbedMode); renders the transcript panel directly in the page flow whenever transcriptionVisible is true, with no trigger button or overlay. Maps to mode === 'embed'. Wraps a single Panel.
  • velt-transcription-button-wireframe: The clickable trigger bubble in floating mode that toggles the transcript panel open and closed. Renders a built-in CC-style icon when showDefaultBtn is true, otherwise the host app’s custom button content. Styled disabled when the clip has no transcribed text.
  • velt-transcription-tooltip-wireframe: Hover tooltip on the floating trigger shown only when transcription is unavailable (clip exists but has no transcribed text). Default copy is “Transcription not available”. Leaf text slot.
  • velt-transcription-panel-container-wireframe: Floating-mode-only structural shell: the CDK connected-overlay that positions and mounts the panel relative to the trigger when sidebarVisible is true. Wraps a single velt-transcription-panel-wireframe.
  • velt-transcription-panel-wireframe: The transcript card itself (React VeltTranscriptionPanelWireframe), used by both modes; a header (title “Summary” plus copy/close actions) over a body (summary block, divider, scrollable transcript list). Draggable in floating mode. Composes CloseButton, CopyLink, Summary, and Content.
  • velt-transcription-close-button-wireframe: The X button in the panel header that closes the panel; on click it toggles the sidebar closed and fires the close output. Default is an X SVG. Leaf icon slot.
  • velt-transcription-copy-link-wireframe: The “copy summary” header action wrapper: a copy icon button plus its tooltip. On click it copies the transcript/summary text to the clipboard and flips the tooltip to “Summary Copied!” briefly. Composes Button and Tooltip.
  • velt-transcription-copy-link-button-wireframe: The clickable copy icon within the copy-link action that performs the copy-to-clipboard of the summary text. Default is a copy/clipboard SVG. Leaf icon slot.
  • velt-transcription-copy-link-tooltip-wireframe: The hover tooltip for the copy button, driven by copySummaryButtonTooltip (“Copy summary”, then “Summary Copied!” after a copy). Leaf text slot.
  • velt-transcription-summary-wireframe: The AI summary block above the transcript divider (React VeltTranscriptionSummaryWireframe): the summary prose plus an expand toggle. In summaryMode it is the only block rendered. Composes Text and ExpandToggle.
  • velt-transcription-summary-text-wireframe: The summary prose itself (React VeltTranscriptionSummaryWireframe.Text); shows the full text when showMoreSummary is set, otherwise the first 100 characters. Leaf text slot.
  • velt-transcription-summary-expand-toggle-wireframe: The “see more / see less” control (React VeltTranscriptionSummaryWireframe.ExpandToggle), rendered only when the summary exceeds 100 characters; toggles showMoreSummary. Composes On and Off state subcomponents.
  • velt-transcription-summary-expand-toggle-off-wireframe: The collapsed-state label of the expand toggle, shown when !showMoreSummary; default text “see more”. Leaf text slot.
  • velt-transcription-summary-expand-toggle-on-wireframe: The expanded-state label of the expand toggle, shown when showMoreSummary; default text “see less”. Leaf text slot.
  • velt-transcription-content-wireframe: The scrollable transcript list below the divider (React VeltTranscriptionContentWireframe); iterates vttFileTextArray and renders one item per VTT segment. Supports an itemTemplate. Composes repeated Item subcomponents.
  • velt-transcription-content-item-wireframe: A single transcript segment row (React VeltTranscriptionContentWireframe.Item); on click calls onSeekTo(...) to scrub the video to that moment, and the active row gets a --selected class for auto-scroll/highlight. Composes Time and Text.
  • velt-transcription-content-item-time-wireframe: The timestamp for a segment (e.g. 00:12), derived from content.startTime with milliseconds stripped; gains a selected class when its row is active. Leaf text slot.
  • velt-transcription-content-item-text-wireframe: The transcribed text of a segment, rendered in curly quotes; the spoken words for that row. Leaf text slot.

​
Activity Log

  • velt-activity-log-wireframe: Top-level React primitive VeltActivityLog; the root activity-feed panel. Renders a rounded card (role=“complementary”, aria-label “Activity Log”) containing the header, loading skeletons, list, and empty state. Data-gated by the activity feature config; useDummyData can populate placeholder rows.
  • velt-activity-log-header-wireframe: Top-level header region (VeltActivityLogHeader); the top bar of the panel holding the title on the left and filter/close actions pushed to the right. Renders by default with the panel.
  • velt-activity-log-header-title-wireframe: The heading text slot in the header (default “Activity Log”, rendered in an <h2>). Labels the panel. Leaf text element.
  • velt-activity-log-header-close-button-wireframe: A close/dismiss (X) button in the header that fires onClose(). Registered and available, but commented out of the default template, so it is not rendered unless added via wireframe markup.
  • velt-activity-log-header-filter-wireframe: The filter control region (VeltActivityLogHeaderFilter); a dropdown that scopes the feed by activity feature type (All Activity, Comments, Recorder, CRDT, Reactions). Only shown when more than one filter is available.
  • velt-activity-log-header-filter-trigger-wireframe: The clickable button (role=“button”) that toggles the filter dropdown open/closed. Shows the active filter and contains the trigger label and icon slots.
  • velt-activity-log-header-filter-trigger-label-wireframe: The text slot inside the filter trigger naming the current filter (e.g. “All Activity”). Leaf text element.
  • velt-activity-log-header-filter-trigger-icon-wireframe: The chevron/dropdown icon slot inside the filter trigger, signaling it is expandable. Leaf icon element.
  • velt-activity-log-header-filter-content-wireframe: The dropdown panel that opens below the trigger, iterating availableFilters to list selectable filter options. Houses one content item per filter.
  • velt-activity-log-header-filter-content-item-wireframe: A single selectable filter option row (role=“option”); clicking it applies that filter. Carries an --active class and aria-selected when current, and exposes filterOption/isActive to its slot. Contains the item label and icon.
  • velt-activity-log-header-filter-content-item-label-wireframe: The text slot of a filter option (e.g. “Comments”, “Reactions”). Leaf text element.
  • velt-activity-log-header-filter-content-item-icon-wireframe: The icon slot of a filter option, typically the selected/check indicator driven by isActive. Leaf icon element.
  • velt-activity-log-list-wireframe: Top-level scrollable feed body (VeltActivityLogList). Iterates virtualScrollItems and renders, per item type, a date-group header, an activity row, or a show-more toggle. The main timeline region.
  • velt-activity-log-list-date-group-wireframe: A section header grouping activities by calendar date (exposes dateGroup.displayLabel/.totalCount to its slot). Renders a date divider before that day’s rows. Organizes the feed chronologically.
  • velt-activity-log-list-date-group-label-wireframe: The text slot of a date-group divider (e.g. “TODAY”, “24 FEB 2025”). Leaf text element.
  • velt-activity-log-list-item-wireframe: A single activity record row (VeltActivityLogListItem); the timeline entry. Clickable (onItemClick()) with a left connector line and an icon column, and exposes activityRecord to its slot. Composes the icon, avatar, content, and time slots.
  • velt-activity-log-list-item-icon-wireframe: The circular category-icon slot for a row, switching on activity type to a tabler SVG (comment, edit, recording, reaction, priority, mention, visibility, subscribe, deleted, status, default). Always shown; carries data-icon-category.
  • velt-activity-log-list-item-avatar-wireframe: The actor’s avatar slot (photo or initials fallback) for a row. Registered and available but hidden by default (commented out of the template and gated by shouldShow()); render it by adding the wireframe markup.
  • velt-activity-log-list-item-content-wireframe: The text block of a row (VeltActivityLogListItemContent), composed as “[user] [action] [detail] [target]”. Accepts activityRecord/defaultCondition props. Composes the user, action, detail, and target slots.
  • velt-activity-log-list-item-content-user-wireframe: The actor display-name slot (getUserName()), usually bold at the start of the activity sentence. Leaf text element.
  • velt-activity-log-list-item-content-action-wireframe: The action-phrase slot describing what happened (getActionText(), e.g. “commented on”, “changed status of”). The verb between actor and target. Leaf text element.
  • velt-activity-log-list-item-content-detail-wireframe: The extra change-detail slot (getChangeDetailText(), e.g. a new status or priority value). Conditionally shown via shouldShow() only when detail text exists. Leaf text element.
  • velt-activity-log-list-item-content-target-wireframe: The target-object slot (getTargetName()); default renders a file/document SVG icon plus the target name. Conditionally shown via shouldShow() only when the activity has a target.
  • velt-activity-log-list-item-time-wireframe: The timestamp slot for a row (getFormattedTime()), a small muted time string aligned to the right edge (e.g. “2:14 PM”, “3h”). Leaf text element.
  • velt-activity-log-list-show-more-wireframe: An expand/collapse toggle at the bottom of a truncated date group (onToggle()), showing chevrons and “Show N Activities” / “Collapse”. Conditionally shown via shouldShow() when a group exceeds its visible limit; exposes isExpanded/remainingCount.
  • velt-activity-log-loading-wireframe: Top-level loading state (VeltActivityLogLoading); default renders 4 pulsing skeleton rows while activities load (allActivities === null). Auto-shown via shouldShow(). Icon and text are internal default markup, not separate primitives.
  • velt-activity-log-empty-wireframe: Top-level empty state (VeltActivityLogEmpty); renders a circle/minus SVG and “No activities found” when there are no activities or none match the active filter. Auto-shown via shouldShow(). Icon and text are internal default markup.

​
Reactions

  • VeltReactionTool: React primitive (<velt-reaction-tool>) rendering the trigger button (default smiley icon) that opens the emoji reaction picker. Accepts an optional videoPlayerId to drop a reaction at a video player’s current playhead, and exposes an onReactionToolClick callback. It is the add-reaction entry point, not a placed reaction.
  • VeltInlineReactionsSection: React primitive (<velt-inline-reactions-section>) rendering a self-contained inline reactions block bound to a targetReactionElementId: the add-reaction tool plus the resulting reaction pins for that element, shown together. Configurable via variant, customReactions, darkMode, and shadowDom.
  • velt-reaction-pin-emoji-wireframe: Slot rendering the emoji glyph portion of a placed reaction pin (reads the annotation emoji/icon). It is the emoji character inside an emoji+count chip. Leaf slot with no children.
  • velt-reaction-pin-count-wireframe: Slot rendering the numeric count beside the emoji in a reaction pin. Shows how many users added that same reaction. Hidden at count 0 for non-standalone pins; leaf slot.
  • velt-reaction-pin-tooltip-wireframe: Slot for the hover popover container on a reaction pin (role tooltip, “Reaction details”). Wraps the list of users who reacted with that emoji. Appears on pin hover unless the pin sets disableTooltip.
  • velt-reaction-pin-tooltip-users-wireframe: Slot rendering the list container that loops over each reacting user inside the pin tooltip (role list, “Users who reacted”). Emits one user row per reaction. Parent of the individual user rows.
  • velt-reaction-pin-tooltip-user-wireframe: Slot representing one row for a single user who reacted, composing that user’s avatar and name (context exposes the reaction’s from). Repeated once per reaction. Role listitem.
  • velt-reaction-pin-tooltip-user-avatar-wireframe: Slot rendering the avatar image or initials of a reacting user. Sits at the start of a reacted-user row in the tooltip. Leaf slot.
  • velt-reaction-pin-tooltip-user-name-wireframe: Slot rendering the display name (or email fallback) of a reacting user. Sits beside the avatar in a reacted-user row. Leaf slot.
  • velt-reactions-panel-items-wireframe: Slot rendering the list container of the picker panel that loops over the available emojis (role list). Lays out the row/grid of choosable reactions. Parent of each pickable item.
  • velt-reactions-panel-item-wireframe: Slot representing one selectable emoji cell in the picker panel; clicking it selects that emoji as the reaction to place (context exposes emoji). Repeated once per available emoji. These are choosable options, with no counts.
  • velt-reactions-panel-item-emoji-wireframe: Slot rendering the emoji glyph inside a single picker item. It is the visible emoji character the user taps to pick. Leaf slot.
  • velt-inline-reactions-section-wireframe: Slot for the root wireframe wrapper of the inline reactions section. Hosts the panel, tool-container, and list sub-slots. Defines the overall structure of the inline reactions UI.
  • velt-inline-reactions-section-panel-wireframe: Slot for the layout panel inside the inline section that groups the tool container and the reactions list. Hidden during skeleton loading, shown once loaded. Parent of the inline tool container and list slots.
  • velt-inline-reactions-section-tool-container-wireframe: Slot wrapping the embedded reaction tool (add-emoji button) in inline mode; selecting an emoji applies it to the target element. Sits at the start/end of an inline reactions row.
  • velt-inline-reactions-section-list-wireframe: Slot rendering the cluster of reaction pins for the target element, one pin per reaction annotation; clicking a pin toggles that reaction. It is the horizontal cluster of emoji+count chips in an inline reactions row.

​
Autocomplete (@mentions)

  • VeltAutocomplete (React primitive): Top-level standalone autocomplete element that powers an @-mention / picker experience. It binds a trigger hotkey (e.g. @) and a static listData array, then renders the underlying velt-autocomplete web component. This is the packaged all-in-one widget that wires an input to Velt’s suggestion engine.
  • VeltAutocompletePanel (React primitive): The floating or inline results panel that holds a search input, an optional multi-select header, and the scrolling list of option rows. It controls type (contact vs generic), single vs multi-select, positioning (above/below/auto), read-only, inline layout, open-on-focus, placeholder, and pre-seeded/excluded contacts. It is the dropdown surface itself, fed manually when not using the packaged VeltAutocomplete.
  • VeltAutocompleteTool (React primitive): A trigger element that opens autocomplete from a custom location such as a toolbar button or editor. It wires a hotkey (defaults to @) and componentMeta so the panel knows which named variant/wireframe to render. It is the launch control only, with no listData of its own.
  • VeltAutocompleteOption (React primitive): A single selectable row in the dropdown list, typically a contact/user with avatar, name, and optional secondary line. It carries userObject/userId, a display variant, and selection flags (isSelected, multiSelect, readOnly); selecting it inserts the mention. Maps to the velt-autocomplete-option-wireframe template.
  • VeltAutocompleteGroupOption (React primitive): A dropdown row representing a whole group/team rather than a single user (e.g. “@engineering”). It carries group identity via group, groupName, groupObject, and groupId and lets the user mention an entire group at once. Maps to the velt-autocomplete-group-option-wireframe template.
  • VeltAutocompleteEmpty (React primitive): The empty / no-matches state of the dropdown, rendered when the filtered list is empty. It can also surface a new-user-contact error message via the newUserContactError prop (e.g. an invite-by-email prompt). Maps to the velt-autocomplete-empty-wireframe template.
  • VeltAutocompleteChip (React primitive): The inline pill/chip rendered for a chosen mention or selected item inside text: a contact, custom value, group, or loading placeholder (type). It holds the resolved user/group/contact data and a shadowDom toggle, and is the committed visual token of an @mention. Hovering it reveals the chip tooltip.
  • VeltAutocompleteChipTooltip (React primitive): The hover/detail tooltip shown when pointing at a chip: a small card with the entity’s avatar, name, and description. It receives userObject/userId and a display variant. Maps to the velt-autocomplete-chip-tooltip-wireframe template.
  • velt-autocomplete-option-wireframe: Wireframe template defining the layout of a single suggestion row in the panel. It composes the option’s icon, name, description, and error-icon slots into one row and is the customization anchor for how each mentionable item is presented. Supports named variants (velt-autocomplete-option-wireframe---<variant>).
  • velt-autocomplete-option-icon-wireframe: Leaf slot inside the option wireframe that renders the leading avatar/icon for the option’s user, resolved from the user object. It sits at the left edge of the suggestion row.
  • velt-autocomplete-option-name-wireframe: Leaf slot inside the option wireframe that renders the primary display-name text of the suggestion row, shown next to the avatar.
  • velt-autocomplete-option-description-wireframe: Leaf slot inside the option wireframe that renders the secondary/muted line of the row, such as an email, role, or a chosen field of the user object. It appears under or beside the name.
  • velt-autocomplete-option-error-icon-wireframe: Leaf slot inside the option wireframe that renders an error/warning indicator on a row representing an invalid new-contact entry (e.g. an invalid email). It shows only when a newUserContactError is present for that item.
  • velt-autocomplete-group-option-wireframe: Wireframe template defining the layout of a group suggestion row, controlling how a mentionable group/team (vs an individual user) is presented in the list. Group display is gated by config flags such as expandMentionGroups and showMentionGroupsFirst.
  • velt-autocomplete-empty-wireframe: Wireframe template defining the layout of the panel’s empty / no-results state, customizing the message shown when no suggestions match the query.
  • velt-autocomplete-chip-tooltip-wireframe: Wireframe template defining the layout of the hover tooltip shown over an inserted mention chip. It composes the tooltip’s icon, name, and description slots into the detail card.
  • velt-autocomplete-chip-tooltip-icon-wireframe: Leaf slot inside the chip tooltip wireframe that renders the avatar/icon of the mentioned entity within the hover card.
  • velt-autocomplete-chip-tooltip-name-wireframe: Leaf slot inside the chip tooltip wireframe that renders the display-name text of the mentioned entity within the hover card.
  • velt-autocomplete-chip-tooltip-description-wireframe: Leaf slot inside the chip tooltip wireframe that renders the secondary/description line of the mentioned entity within the hover card.

​
Presence

  • velt-presence-wireframe: Root of the Presence feature, rendered by the React primitive VeltPresence. It is the container for the live presence avatar stack: it subscribes to the users currently online on the document/location, caps the row to maxUsers, and renders the avatar list plus the overflow count. Renders nothing when there are no other online users.
  • velt-presence-avatar-list-wireframe: The horizontal row that iterates the filtered online users and renders one avatar item per user (only items below the maxUsers cut-off). It is the repeated/iterating part of the presence stack, as opposed to the single overflow pill at the end.
  • velt-presence-avatar-list-item-wireframe: A single online user’s avatar within the list, drawn with a colored outline ring keyed to the user’s color. Hovering it opens the presence tooltip and clicking it fires the user-click event; away/inactive users are rendered with dimmed styling.
  • velt-presence-avatar-remaining-count-wireframe: The overflow indicator at the end of the row, an avatar-shaped pill showing +N where N is the number of online users beyond the maxUsers cap. It renders only when there are more online users than the avatar cap allows.
  • velt-presence-tooltip-wireframe: The floating popover shown when hovering a presence avatar, anchored to that avatar. It holds the hovered user’s avatar plus a status container with the user’s name and active/inactive line, and renders only when a presence user is set.
  • velt-presence-tooltip-avatar-wireframe: The hovered user’s avatar shown inside the tooltip card. It renders the user’s profile image or initials and gets away styling when the user is inactive.
  • velt-presence-tooltip-status-container-wireframe: The wrapper inside the tooltip that groups the user’s name and the active/inactive status line. It is the text block beside or below the tooltip avatar that holds the name and status slots.
  • velt-presence-tooltip-user-name-wireframe: The name line at the top of the tooltip, rendering the hovered user’s display name (falling back to email). It shows a skeleton loader placeholder while the name or email is still resolving.
  • velt-presence-tooltip-user-active-wireframe: The status line rendered only when the user’s online status is online, showing text such as “User online.” It is mutually exclusive with the inactive line and indicates the user is currently active.
  • velt-presence-tooltip-user-inactive-wireframe: The status line rendered only when the user is away, showing the away duration such as “5 mins ago.” It is mutually exclusive with the active line; the inactivity timers control when a user flips to this away state.

​
Cursors

  • velt-cursor-pointer-wireframe: Root of the Cursor feature’s per-user pointer, rendered by the React primitive VeltCursor (which mounts one of these per remote online user). It is absolutely positioned at that user’s live coordinates and contains the arrow glyph plus exactly one of four mutually-exclusive render modes: default name label, avatar, audio-huddle bubble, or video-huddle bubble.
  • velt-cursor-pointer-arrow-wireframe: The pointer glyph itself, a colored arrowhead drawn in the user’s color with a white outline at the tip of the pointer. Its default content is an SVG arrow projected from the parent, and it is the top-left anchor of the whole moving pointer.
  • velt-cursor-pointer-default-wireframe: The default render mode, a rounded colored pill next to the arrow showing the user’s name and optionally a comment. It is shown when the cursor is not in avatar mode and not in an audio/video huddle, and displays a skeleton loader while the user record loads.
  • velt-cursor-pointer-default-name-wireframe: The user’s display name inside the default pill, falling back to the part of the email before the @. Its text color is auto-computed for contrast against the user’s color, and it renders only when a name or email exists.
  • velt-cursor-pointer-default-comment-wireframe: An optional short comment or status string attached to the cursor that travels with the pointer. It renders only when the cursor user has a comment value, and a present comment also adds a distinct comment border to the pointer container.
  • velt-cursor-pointer-avatar-wireframe: The avatar render mode, showing the user’s profile photo in a colored circular container at the pointer instead of a name label. It is enabled via the avatarMode prop on VeltCursor and falls back to the default name label if the image fails to load.
  • velt-cursor-pointer-audio-huddle-wireframe: The audio-bubble render mode used when a huddle is running in on-cursor mode and the user has audio on but no video. The pointer becomes an avatar bubble with an animated colored ring that pulses to the user’s speaking volume.
  • velt-cursor-pointer-audio-huddle-avatar-wireframe: The user’s avatar shown inside the audio-huddle bubble. Its default content is the shared user-avatar element for the cursor user.
  • velt-cursor-pointer-audio-huddle-audio-wireframe: The hidden audio element inside the audio-huddle bubble that plays the remote user’s microphone stream. It is muted with volume zero for the local user’s own cursor and is not independently visible UI.
  • velt-cursor-pointer-video-huddle-wireframe: The video-bubble render mode used when a huddle is on-cursor and the user has video on. The pointer becomes a live webcam tile ringed in the user’s color that follows the cursor; the local user’s own tile is mirrored and muted.