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 AI Rewriter feature places text-rewriting suggestions on a target text range with AI-generated rewrite options the user can pick from. Variables below are available inside any <velt-rewriter-...-wireframe> tag via three forms:
| You want to… | Use | Example |
|---|
| Display a value as text | <velt-data field="var" /> | <velt-data field="componentConfig.options.length" /> |
| Hide / show conditionally | velt-if="{var}" | velt-if="{componentConfig.loading}" |
| Toggle a CSS class | velt-class="'cls': {var}" | velt-class="'is-loading': {componentConfig.loading}" |
This feature uses the flat-config access pattern — variables are referenced via the explicit componentConfig.<path> form. Each primitive carries its own componentConfigSignal — the text portal, the dialog, and the bottom-sheet expose different variable sets (documented separately below).
Component Config — Rewriter Text Portal
State on the <velt-rewriter-text-portal> inline highlight that sits over the rewriter’s target text.
| Variable | Type | Description | Example |
|---|
componentConfig.rewriterPinAnnotation | RewriterAnnotation | The annotation this portal represents. | <velt-data field="componentConfig.rewriterPinAnnotation.from.name" /> |
componentConfig.first | boolean | Annotation is the first in a stack. | velt-class="'is-first': {componentConfig.first}" |
componentConfig.last | boolean | Annotation is the last in a stack. | velt-class="'is-last': {componentConfig.last}" |
componentConfig.isPhone | boolean | Mobile layout flag. | velt-class="'is-phone': {componentConfig.isPhone}" |
Component Config — Rewriter Dialog / Bottom Sheet
State shared between <velt-rewriter-dialog> and <velt-rewriter-bottom-sheet> (same data, different presentation).
| Variable | Type | Description | Example |
|---|
componentConfig.searchCount | number | Number of generation requests submitted so far. | <velt-data field="componentConfig.searchCount" /> |
componentConfig.loading | boolean | Generating new options. | velt-class="'is-loading': {componentConfig.loading}" |
componentConfig.bottomSheetMode | boolean | Renders as a bottom sheet (mobile). | velt-class="'bottom-sheet': {componentConfig.bottomSheetMode}" |
componentConfig.apiCalled | boolean | An AI generation call has been made. | velt-if="{componentConfig.apiCalled}" |
componentConfig.options | string[] | AI-generated rewrite options. | <velt-data field="componentConfig.options.length" /> |
componentConfig.selectedOptionIndex | number | Currently-selected option (-1 when none). | velt-class="'option-{componentConfig.selectedOptionIndex}-selected': true" |
Type Reference
Types referenced by the variables above:
| Type | Description |
|---|
RewriterAnnotation | The rewriter annotation — from, targetText, options, etc. |
Subcomponents
Each subcomponent below has its own wireframe tag.
rewriters-container
The per-document orchestrator. Renders one rewriter portal per active rewriter annotation.
- Public element:
<velt-rewriters-container>
- Wireframe tag:
<velt-rewriters-container-wireframe>
| Property | Value |
|---|
| Extra variables | None at the container level. |
rewriter-text-portal
The inline highlight that sits over the rewriter’s target text.
- Public element:
<velt-rewriter-text-portal>
- Wireframe tag:
<velt-rewriter-text-portal-wireframe>
React / Next.js
Other Frameworks
<VeltRewriterTextPortalWireframe
velt-class="'is-first': {componentConfig.first}, 'is-last': {componentConfig.last}">
<span className="my-rewriter-highlight">
<velt-data field="componentConfig.rewriterPinAnnotation.from.name" />
</span>
</VeltRewriterTextPortalWireframe>
<velt-rewriter-text-portal-wireframe
velt-class="'is-first': {componentConfig.first}, 'is-last': {componentConfig.last}">
<span class="my-rewriter-highlight">
<velt-data field="componentConfig.rewriterPinAnnotation.from.name"></velt-data>
</span>
</velt-rewriter-text-portal-wireframe>
rewriter-dialog
The desktop popover with rewrite options.
- Public element:
<velt-rewriter-dialog>
- Wireframe tag:
<velt-rewriter-dialog-wireframe>
rewriter-bottom-sheet
The mobile bottom-sheet variant — same data as rewriter-dialog, mobile UX.
- Public element:
<velt-rewriter-bottom-sheet>
- Wireframe tag:
<velt-rewriter-bottom-sheet-wireframe>
| Property | Value |
|---|
| Extra variables | Same as rewriter-dialog. |
shouldShow | Renders when componentConfig.bottomSheetMode === true. |
Putting it together
A typical Rewriter dialog that swaps between a loading state, an empty (pre-call) state, and the rewrite-options list:
React / Next.js
Other Frameworks
<VeltRewriterDialogWireframe
velt-class="'is-loading': {componentConfig.loading}">
<header className="my-rewriter__header">
<span velt-if="{componentConfig.apiCalled}">
<velt-data field="componentConfig.options.length" /> options
</span>
<span velt-if="!{componentConfig.apiCalled}">
Pick a rewrite to start
</span>
</header>
<div className="my-rewriter__loader" velt-if="{componentConfig.loading}">
Generating…
</div>
<ul className="my-rewriter__options" velt-if="!{componentConfig.loading}">
<li>
<velt-data field="componentConfig.options.0" />
</li>
</ul>
</VeltRewriterDialogWireframe>
<velt-rewriter-dialog-wireframe
velt-class="'is-loading': {componentConfig.loading}">
<header class="my-rewriter__header">
<span velt-if="{componentConfig.apiCalled}">
<velt-data field="componentConfig.options.length"></velt-data> options
</span>
<span velt-if="!{componentConfig.apiCalled}">
Pick a rewrite to start
</span>
</header>
<div class="my-rewriter__loader" velt-if="{componentConfig.loading}">
Generating…
</div>
<ul class="my-rewriter__options" velt-if="!{componentConfig.loading}">
<li>
<velt-data field="componentConfig.options.0"></velt-data>
</li>
</ul>
</velt-rewriter-dialog-wireframe>
