Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The Area feature draws rectangle “area annotations” used to highlight regions of the page (often paired with a comment). Variables below are available inside <velt-area-pin-portal-wireframe> via three forms:
| You want to… | Use | Example |
|---|
| Display a value as text | <velt-data field="var" /> | <velt-data field="componentConfig.areaPinAnnotation.from.name" /> |
| Hide / show conditionally | velt-if="{var}" | velt-if="{componentConfig.selected}" |
| Toggle a CSS class | velt-class="'cls': {var}" | velt-class="'is-resizing': {componentConfig.isResizing}" |
This feature uses the flat-config access pattern — variables are referenced via the explicit componentConfig.<path> form.
Component Config
| Variable | Type | Description | Example |
|---|
componentConfig.areaPinAnnotation | AreaAnnotation | The area annotation data — geometry, colour, author, and metadata. | <velt-data field="componentConfig.areaPinAnnotation.from.name" /> |
componentConfig.areaPinAnnotationOnResize | AreaAnnotation | Mid-resize snapshot of the annotation. | Internal — set during resize. |
componentConfig.commentPinAnnotation | CommentAnnotation | Optional linked comment annotation. | <velt-data field="componentConfig.commentPinAnnotation.comments.length" /> |
componentConfig.user | User | Currently identified end-user. | <velt-data field="componentConfig.user.name" /> |
componentConfig.selected | boolean | Pin is currently selected. | velt-class="'is-selected': {componentConfig.selected}" |
componentConfig.hideAreaAnnotation | boolean | Hide the area visual. | velt-class="'is-hidden': {componentConfig.hideAreaAnnotation}" |
componentConfig.areaAnnotationColor | string | Border / overlay colour (default '#625DF5'). | Internal — used to compute inline style. |
componentConfig.areaProperties | AreaProperty | Geometry data — top / left / width / height. | Internal — used to compute inline style. |
componentConfig.isResizing | boolean | User is currently resizing this pin. | velt-class="'is-resizing': {componentConfig.isResizing}" |
componentConfig.resizingOffset.top | number | Vertical resize-handle offset. | Internal — used to compute inline style. |
componentConfig.resizingOffset.left | number | Horizontal resize-handle offset. | Internal — used to compute inline style. |
componentConfig.offsetTop | number | Vertical position offset. | Internal — used to compute inline style. |
componentConfig.offsetLeft | number | Horizontal position offset. | Internal — used to compute inline style. |
Type Reference
Types referenced by the variables above:
| Type | Description |
|---|
User | Identified end-user object. |
CommentAnnotation | Linked comment-annotation thread (when the area is paired with a comment). |
AreaAnnotation | Area-annotation data — geometry (top, left, width, height), colour, author, and metadata. |
AreaProperty | Geometry shape used by componentConfig.areaProperties. |
Subcomponents
The Area feature has three customer-facing primitives. Only area-pin-portal registers a wireframe tag.
area-pin-portal
The rendered area-pin overlay — the only Area primitive with a wireframe tag.
- Public element:
<velt-area-pin-portal>
- Wireframe tag:
<velt-area-pin-portal-wireframe>
| Property | Value |
|---|
| Extra variables | None — the portal sees the full componentConfig shown above. |
React / Next.js
Other Frameworks
<VeltAreaPinPortalWireframe
velt-class="'is-selected': {componentConfig.selected}, 'is-resizing': {componentConfig.isResizing}, 'is-hidden': {componentConfig.hideAreaAnnotation}">
<div className="my-area-pin">
<span className="my-area-pin__author">
<velt-data field="componentConfig.areaPinAnnotation.from.name" />
</span>
</div>
</VeltAreaPinPortalWireframe>
<velt-area-pin-portal-wireframe
velt-class="'is-selected': {componentConfig.selected}, 'is-resizing': {componentConfig.isResizing}, 'is-hidden': {componentConfig.hideAreaAnnotation}">
<div class="my-area-pin">
<span class="my-area-pin__author">
<velt-data field="componentConfig.areaPinAnnotation.from.name"></velt-data>
</span>
</div>
</velt-area-pin-portal-wireframe>
The trigger to draw a new area.
- Public element:
<velt-area-tool>
| Property | Value |
|---|
| Wireframe tag | No <velt-...-wireframe> registration available on this primitive. |
area-container
The per-document container that orchestrates all area pins.
- Public element:
<velt-area-container>
| Property | Value |
|---|
| Wireframe tag | No <velt-...-wireframe> registration available on this primitive. |
Putting it together
A typical area pin that highlights its selected state, dims while hidden, and shows a resize affordance while the user drags:
React / Next.js
Other Frameworks
<VeltAreaPinPortalWireframe
velt-class="'is-selected': {componentConfig.selected}, 'is-hidden': {componentConfig.hideAreaAnnotation}, 'is-resizing': {componentConfig.isResizing}">
<div className="my-area-pin">
<span className="my-area-pin__author">
<velt-data field="componentConfig.areaPinAnnotation.from.name" />
</span>
<span
className="my-area-pin__resize-handle"
velt-if="{componentConfig.selected}" />
</div>
</VeltAreaPinPortalWireframe>
<velt-area-pin-portal-wireframe
velt-class="'is-selected': {componentConfig.selected}, 'is-hidden': {componentConfig.hideAreaAnnotation}, 'is-resizing': {componentConfig.isResizing}">
<div class="my-area-pin">
<span class="my-area-pin__author">
<velt-data field="componentConfig.areaPinAnnotation.from.name"></velt-data>
</span>
<span class="my-area-pin__resize-handle"
velt-if="{componentConfig.selected}"></span>
</div>
</velt-area-pin-portal-wireframe>
