Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/docs/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). The Area feature has limited wireframe support — no dedicated *-wireframe tag is registered for its primitives. The variables below describe the componentConfig exposed by <velt-area-pin-portal>:
| 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>
| Property | Value |
|---|
| Wireframe tag | No direct wireframe slot — the area-pin renders through its portal. Per-pin visual customization is not currently exposed via a dedicated *-wireframe tag. |
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. |
