Rewrite toolbar
Select a sentence and let the agent rewrite it in place.
Click a sentence in the document and a small toolbar offers rewrites — Clearer, Shorter,
Friendlier by default. Pick one and onRewrite is called; while it works the toolbar says
Rewriting, then the answer is written in beside the old sentence word by word, struck-through
old against the new. Keep it with Accept or put it back with Undo. The toolbar sits above the
sentence, or under it when above would cover the header.
Usage
<!-- include core.css + rewrite-toolbar.css + core.js -->
<div class="card" data-c="rewrite-toolbar">
<div class="rwx panel">
<div class="rwx-h"><span class="ft">DOC</span><span>Onboarding intro</span><span class="muted rwx-st">Click a sentence</span></div>
<div class="rwx-doc"></div>
<div class="rwx-tb" role="toolbar" aria-label="Rewrite">
<button class="rwx-b" data-k="clear">Clearer</button>
<button class="rwx-b" data-k="short">Shorter</button>
<button class="rwx-b" data-k="warm">Friendlier</button>
</div>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
title | ReactNode | The document's name shown in the header. |
kind | string | The file type tag in front of the name. Defaults to DOC. |
sentences / defaultSentences | string[] | The text, one sentence each, so a click picks a sentence. |
onSentencesChange | (sentences) => void | Called with every sentence once a rewrite is accepted. |
selected / defaultSelected | number | null | Index of the sentence with the toolbar on it, or null. |
onSelectedChange | (index) => void | Called when the selected sentence changes. |
actions | RewriteAction[] | The toolbar's buttons. Defaults to Clearer, Shorter and Friendlier. |
onRewrite | (sentence, action, index) => Promise<string> | string | Writes the new sentence. If it rejects, the sentence is left as it was. |
onAsk | (sentence, index) => void | The wand at the end of the toolbar. Left out, it rewrites with the first action. |
askLabel | string | The tip on the wand. Defaults to Ask the agent. |
askShortcut | string | The shortcut shown in that tip. Defaults to ⌘K. |
ref | RewriteToolbarHandle | Drive it from a shortcut or demo: rewrite(action), accept(), undo(). |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The
document sits on a surface panel; the floating toolbar uses the ink/on-ink tokens so it reads as a
dark pill over the text, and the picked sentence tints with --dm-sel. The struck-through old text
uses the bad token for its line, and the new words fade and de-blur in as they arrive.