Live Selection Wireframe Variables

Template variables exposed by the Live Selection wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

Limited support. Live Selection does not currently expose a <velt-...-wireframe> tag, so velt-data / velt-if / velt-class interpolation is not yet available on this feature. Until wireframe-tag registration ships, customize Live Selection through CSS. The variables below are documented for completeness so you know what the runtime model looks like.

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

Overview

The Live Selection feature renders the floating “user X is selecting this” indicator anchored to a remote user’s current selection range. The variables below describe the runtime model. Once wireframe-tag interpolation ships for this feature, they will be readable via three forms:

You want to…	Use	Example
Display a value as text	<velt-data field="var" />	<velt-data field="componentConfig.selections.0.user.name" />
Hide / show conditionally	velt-if="{var}"	velt-if="{componentConfig.selections.length} > 0"
Toggle a CSS class	velt-class="'cls': {var}"	velt-class="'pos-{componentConfig.userIndicatorPosition}': true"

This feature uses the flat-config access pattern — variables are referenced via the explicit componentConfig.<path> form.

Component Config

Variable	Type	Description	Example
componentConfig.position	CursorPosition | null	The selection’s current position (top / left / right / bottom rect).	Internal — used to compute inline style.
componentConfig.userIndicatorPosition	'start' | 'end' | …	Where the indicator is anchored relative to the selection range.	velt-class="'pos-{componentConfig.userIndicatorPosition}': true"
componentConfig.userIndicatorType	'Avatar' | 'Name' | …	What to show — avatar, name label, or both.	velt-class="'type-{componentConfig.userIndicatorType}': true"
componentConfig.overlayPosition	{ originX, originY, overlayX, overlayY }	CDK overlay anchoring config.	Internal — CDK overlay config.
componentConfig.selections	Selection[]	Active remote selections. Each entry has user (who’s selecting) plus the selection range data.	<velt-data field="componentConfig.selections.length" />

Type Reference

Types referenced by the variables above:

Type	Description
User	Identified end-user (used by componentConfig.selections.<i>.user).
CursorPosition	Selection bounding-rect shape (top, left, right, bottom).
Selection	Remote-selection record — includes user and the selection range data.

Subcomponents

selection-element-portal

The floating user-indicator (avatar / name / colour bar) anchored to a remote user’s current selection range.

• Public element: <velt-selection-element-portal>
• Wireframe (HTML): No direct wireframe slot — the selection feature has limited wireframe support; per-element visual customization is not currently exposed via a dedicated *-wireframe tag.
• Wireframe (React): No direct wireframe slot.

Property	Value
Extra variables	None — the portal sees the full componentConfig shown above.
shouldShow	No primitive-level override — render is controlled by whether componentConfig.selections has any active entries.

Related

• Live Selection — wireframe overview and default markup for this primitive.
• Template Variables — overview of the velt-data / velt-if / velt-class system.