What is this?

Rety is a library that allows you to record the edits you make on one or more pieces of text (usually code)
and replay them later to recreate the same typing flow.

This is particularly useful for orchestrating live demos that run without your presence.

It does not come with any particular UI, the UI is up to you. The UI you see in some of the demos in these docs is not part of Rety.

Here’s an example of using it together with the Inspire.js Live demo plugin to do live demos during a talk:

Background & Motivation

I love live coding as a teaching tool, and over the years
it
has become
part
of
my
trademark
speaking
style.

When combined with some kind of interactive preview,
it allows the speaker to demonstrate not only the final state of a coding snippet, but how you get there, and what the intermediate results are.
Live coding is to programming what a blackboard is to math or physics.

However, it does create a unique challenge: My live coded slides don't make sense without me.
This may be acceptable for a conference talk, which is usually recorded, but not in other contexts,
such as teaching a university course, where all instructors need to be able to teach all lectures, and students need to be able to quickly refer to examples shown.

I didn't want to remove live coding from my slides, as I truly believe it is the perfect implementation of the "show, don’t tell" teaching adage,
so I thought instead: what if I could record my live coding, and make it replayable?
However, doing so manually seemed like cruel and unusual punishment.
And thus, rety was born (pronounced like the "rety" in "retype").

After using it extensively for my course at MIT,
I started using it during actual conference talks as well, as it was strictly superior to actual live coding:
It offered the same progressive development which is the primary benefit of live coding,
but none of the fumbling, delays, or mistakes that often come with it.
You can watch the first conference talk I did with it, at CSS Day 2022 here
(first live demo at 7:15).

Rety is designed to work well with the code editors of Prism Live and CodeFlask
but it should work with any , </code> or even <a href="#recorder-compatible-controls" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">compatible custom elements</a>.</p><p class="my-3"></section></p><p class="my-3"><section></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Basic Usage</h2></p><p class="my-3">To record edits on a textarea (<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">myTextarea</code>):</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />import Recorder from "https://rety.verou.me/src/recorder.js";</p><p class="my-3">let recorder = new Recorder(myTextarea);<br />recorder.start();</p><p class="my-3">recorder.addEventListener("actionschange", evt => {<br /> // recorder.actions has been updated<br /> // evt.detail contains the new (or in some cases changed) action<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">To replay an array of actions (</code>actionsArray<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) on a textarea (</code>editor<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) with default settings:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />import Replayer from "https://rety.verou.me/src/replayer.js";</p><p class="my-3">let replayer = new Replayer(editor);<br />replayer.runAll(actionsArray);<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Instead of importing directly from the CDN, you can also use npm:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />npm install rety<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"></section></p><p class="my-3"><section></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">API</h2></p><p class="my-3">Rety consists of two classes, residing in correspondingly named modules: </code>Recorder<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>Replayer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The </code>Recorder<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class allows you to record actions on one or more </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, or any <a href="#compatible-controls" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">recorder-compatible control</a>.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />let recorder = new Recorder(source);<br />recorder.start();<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">To record actions from a single editor, </code>source<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> can be a reference to that editor.<br />To record actions from multiple editors, pass in an object literal with identifiers as keys and references to the elements as values.</p><p class="my-3">E.g.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />let recorder = new Recorder({<br /> css: document.querySelector("textarea#css"),<br /> html: document.querySelector("textarea#html")<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The identifiers can be anything you want, e.g. to record actions in a multi-file editor environment, the ids could be the filenames.</p><p class="my-3">Call </code>recorder.start()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to start recording and </code>recorder.pause()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to temporarily pause recording.</p><p class="my-3">You will find any recorded actions in </code>recorder.actions<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>recorder<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is a subclass of </code>EventTarget<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, meaning it emits events.<br />You can listen to the </code>actionschange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event to respond to any change in the </code>recorder.actions<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> array.</p><p class="my-3">Most changes to </code>recorder.actions<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will be new actions being added at the end of the array.<br />However, there are few cases where instead of adding a new action, the previous action is modified instead.<br />This happens when the caret moves around or the selection is modified without any other action between changes.<br />To preserve all caret changes as separate actions, you can use the </code>preserveCaretChanges<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> option:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />let recorder = new Recorder(source, {preserveCaretChanges: true});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">You can also provide options when calling </code>start()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />recorder.start({preserveCaretChanges: true});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Constructor: </code>new Recorder(editor [, options])<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Options:</p><p class="my-3">| Option | Default | Description |<br />|---|---|---|<br />| </code>preserveCaretChanges<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | If true, will not coalesce consecutive caret position changes |<br />| </code>pauseThreshold<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>2000<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The delay (in ms) between consecutive actions that will cause a </code>pause<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> action to be inserted. Use </code>0<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to disable pause actions entirely. |<br />| </code>pauses<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Set to </code>"ignore"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to not record pauses entirely.<br />| </code>pauseCap<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Set to a number of milliseconds to cap pauses to that duration.<br />| </code>keys<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Keystrokes to record, see <a href="#record-custom-keystrokes" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">How do I record custom keystrokes that don’t produce output?</a></p><p class="my-3">To record custom keystrokes (that don’t result in output), you’d use the </code>keys<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> parameter with strings like </code>"Ctrl + Shift + E"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />You can specify one or more keystrokes as an array.<br />By default the </code>keyup<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event is monitored. You can specify a different event by using an object instead of a string,<br />e.g. </code>{key: "Ctrl + Shift + E", event: "keydown"}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">#### Methods</p><p class="my-3">| Member | Description |<br />|---|---|<br />| </code>recorder.start()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Start listening to edits |<br />| </code>recorder.pause()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Temporarily stop listening to edits |</p><p class="my-3">#### Properties and accessors</p><p class="my-3">| Member | Description |<br />|---|---|<br />| </code>recorder.actions<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The array of actions recorded so far.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The </code>Replayer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class allows you to run a single action or a sequence of actions on an </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, or any <a href="#compatible-controls" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">replayer-compatible control</a>.</p><p class="my-3">#### Constructor: </code>new Replayer(dest [, options])<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"></code>dest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is the same type as the first argument to the </code>Recorder<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> constructor.<br />To replay actions on a single editor element, </code>dest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> would be a reference to that element.<br />To replay actions that span multiple editors, </code>dest<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> would be an object literal that maps ids to editor elements.</p><p class="my-3">Options:</p><p class="my-3">| Option | Default | Description |<br />|---|---|---|<br />| </code>delay<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>140<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Delay between consecutive actions when </code>runAll()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is used |<br />| </code>pauses<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>"delay"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | What to do with pause actions? </code>"delay"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will just pause by that amount of time, </code>"pause"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will pause playback, </code>"ignore"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will discard them. You can also provide a function that decides which of these keywords to return based on the action specifics |<br />| </code>animated_selection<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Should selections be animated or happen at once? |</p><p class="my-3">#### Methods</p><p class="my-3">| Member | Description |<br />|---|---|<br />| </code>async replayer.runAll(actions)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Run a sequence of actions. Returns a promise that resolves when all actions have ran or the replayer has been paused. If another sequence of actions is currently being played, it will stop it first, then replace the rest of its queue.<br />| </code>async replayer.queueAll(actions)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Just like </code>runAll()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> but instead of replacing the queue, it will add the actions to the existing queue.<br />| </code>async replayer.next()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Runs the next action in the queue<br />| </code>async replayer.run([action])<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Run a single action (except pauses, since this is pretty low-level and does not handle timing).<br />| </code>replayer.pause()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Finish the action currently executing (if any), then pause.<br />| </code>async replayer.resume()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Resumes playing the current queue.</p><p class="my-3">#### Properties and Accessors</p><p class="my-3">| Member | Description |<br />|---|---|<br />| </code>recorder.queue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Contains the actions that have been queued up for playing, but have not been played yet. Can also be set, and the array it is set to will be (shallowly) cloned. |<br />| </code>recorder.paused<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if the Replayer is paused or stopped, </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if playing, </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if the Replayer has not yet been used in any way. |<br />| </code>recorder.played<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Array with actions that have already been played from the current queue. These actions have been removed from the queue. |</p><p class="my-3"></section></p><p class="my-3"><section></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">FAQ</h2></p><p class="my-3"><section id="record-page"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Drag this bookmarklet to your bookmarks toolbar: <a href="javascript:(function(){import('https://rety.verou.me/plugins/bookmarklet.js').then(m => m.default())})()">⏺ Rety</a>.<br />Then, when you’re ready to record, press it. It will insert a button at the top right corner that you press to stop recording.<br />When you stop recording, it will log the actions it recorded in the console, for your copying convenience. It will log them in two ways: both as an object, as well as a minified JSON serialization.<br />Unfortunately, it does not yet allow customizing recording options.</p><p class="my-3"></section></p><p class="my-3"><section id="browser-support"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Generally: all modern browsers. No IE11 or pre-Chromium Edge. More details:</p><p class="my-3">* </code>Recorder<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> makes heavy use of <a href="https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/inputType" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>evt.inputType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> so it supports browsers that support that<br />* </code>Replayer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> makes heavy use of <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>document.execCommand()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a>, which limits Firefox support to Firefox 89+.<br />* Both are written with well-supported modern ES features, such as <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">private members</a>. Since these generally have better support than </code>evt.inputType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, I did not bother transpiling.</p><p class="my-3"></section></p><p class="my-3"><section id="tests"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">I’m still trying to decide what's the best testing framework for mocking interactions with a textarea.<br />If you have suggestions, <a href="https://github.com/LeaVerou/rety/issues/1" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">please weigh in</a>!</p><p class="my-3"></section></p><p class="my-3"><section id="minified"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">This is currently a tiny codebase, so minifying is more trouble than it’s worth.<br />No, it makes zero difference if you save one KB.<br />If in the future the code grows enough that minifying adds value, there will be a minified version.</p><p class="my-3">If you <em>really</em> can’t live with a non-minified asset, you can always use the [generated version by jsdelivr]().</p><p class="my-3"></section></p><p class="my-3"><section id="recorder-compatible-controls"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>Recorder<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will work fine with any control that meets the following requirements:<br />- Implements </code>selectionStart<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>selectionEnd<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> properties<br />- Implements a </code>value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property<br />- Emits </code>input<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> events with suitable <a href="https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/inputType" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>inputType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> properties</a><br />- Emits <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>select<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> events when the selection changes</p><p class="my-3"></section></p><p class="my-3"><section id="replayer-compatible-controls"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>Replayer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will work fine with any control that meets the following requirements:<br />- Implements writable </code>selectionStart<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>selectionEnd<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> properties<br />- Works well with </code>document.execCommand()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (the actions used are </code>insertText<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>delete<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>forwardDelete<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>undo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>redo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</p><p class="my-3"></section></p><p class="my-3"><section id="record-custom-keystrokes"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">When constructing </code>Recorder<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> objects, you can pass in a </code>keys<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> parameter, which is an array of custom keystrokes to record.<br />These keystrokes can be specified as strings, like </code>Ctrl + Enter<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or objects (like </code>{key: "Ctrl + Enter", event: "keydown"}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">), if you also want to specify an event (other than </code>keyup<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> which is the default).</p><p class="my-3"></code>Recorder<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will then record <a href="#key-actions" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>key<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> actions</a> that match this keystroke.<br /></code>Replayer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> does not need to be taught about custom keystrokes, it replicates any </code>key` action it finds.</p><p class="my-3"></section></p><p class="my-3"></section></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>