feat: add better provider support, icons, regen, and a lot more

app/components/Markdown/Renderer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RootContent } from 'hast';
+import MarkdownShikiHighlight from './ShikiHighlight.vue';
 
 const props = defineProps<{
     content: string;
@@ -92,13 +93,14 @@ watch(parts, async (newParts) => {
         hastParts.value = stableBase.concat(latestHast.children);
     }
 })
-
 </script>
 
 <template>
     <div class="prose-wrapper">
         <article class="markdown-body">
-            <MarkdownAstNode v-for="(node, index) in hastParts" :key="`${id}-${index}`" :node="node" />
+            <template v-for="(node, index) in hastParts" :key="`${id}-${index}`">
+                <MarkdownAstNode :node="node" v-memo="[node.type === 'text' ? node.value : node.data]" />
+            </template>
         </article>
     </div>
 </template>
@@ -227,11 +229,16 @@ blockquote {
     padding-left: 0.5rem;
 }
 
+.table-wrapper {
+    display: block;
+    overflow-x: auto;
+    margin: calc(var(--spacing) * 4) 0;
+}
+
 /* TODO: make these tables better, this is literally the first attempt from Gemini 3 flash */
 table {
     width: 100%;
     border-collapse: collapse;
-    margin: calc(var(--spacing) * 4) 0;
     font-size: 0.95rem;
     text-align: left;
     background-color: var(--color-base);
@@ -283,6 +290,11 @@ label>span {
     cursor: text;
 }
 
+hr {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
 .checkbox {
     width: min-content;
 }