Test out REPL codefences

docs-app/app/templates/3-ui/avatar.gjs.md

@@ -3,9 +3,7 @@
 An image element with a fallback for representing the user.
 
 
-<div class="featured-demo">
-
-```gjs live preview no-shadow
+```gjs repl 
 import { Avatar } from 'ember-primitives';
 
 <template>
@@ -61,8 +59,6 @@ import { Avatar } from 'ember-primitives';
 </template>
 ```
 
-</div>
-
 ## Install
 
 ```hbs live

docs-app/vite.config.mjs

@@ -5,6 +5,11 @@
 import { defineConfig } from "vite";
 import { scopedCSS } from "ember-scoped-css/vite";
 import rehypeShiki from "@shikijs/rehype";
+import { visit } from "unist-util-visit";
+
+function flatReplaceAt(array, index, replacement) {
+  array.splice(index, 1, ...replacement);
+}
 
 export default defineConfig(async (/* { mode } */) => {
   return {
@@ -22,6 +27,29 @@
       ember(),
       kolay({
         packages: ["ember-primitives", "which-heading-do-i-need"],
+        remarkPlugins: [
+          [
+            function codeToRepl(/* options */) {
+              return (tree) => {
+                return visit(tree, ["code"], function (node, index, parent) {
+                  if (node.meta?.includes("repl")) {
+                    let { value, lang, meta } = node;
+
+                    let newNode = {
+                      value: `<REPL @code="${JSON.stringify(value)}" @format="${lang}" />`,
+                      data: {},
+                      type: "glimmer_raw",
+                      children: [],
+                    };
+                    flatReplaceAt(parent.children, index, [newNode]);
+                    return;
+                  }
+                });
+              };
+            },
+            {},
+          ],
+        ],
         rehypePlugins: [
           [
             rehypeShiki,
@@ -45,6 +73,7 @@
           import { InViewport } from 'ember-primitives/viewport';
 
           import { Callout } from '@universal-ember/docs-support';
+          import { REPL } from 'limber-ui';
         `,
       }),
       babel({